Jquery 验证是否允许提交不符合规则

Question

我有以下表格，我正在尝试向其添加 jquery 验证。我的问题是当我点击提交时出现 none 的验证消息，如果我点击提交两次，表单就会提交。因此，基本上验证不起作用。

有没有人看出我做错了什么？

我正在使用以下库：

<script src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>  
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>

<form method="POST" action="" id="proposal-form">
    <div class="panel-input"><input type="text" id="proposal-name" class="proposal-input" placeholder="Name *"></div>
    <div class="panel-input"><input type="email" id="proposal-email" class="proposal-input" placeholder="Email *"></div>
    <div class="panel-input"><input type="tel" id="proposal-phone" class="proposal-input" placeholder="Phone *"></div>
    <div class="panel-input"><input type="text" id="proposal-location" class="proposal-input" placeholder="Location *"></div>
    <input type="submit" value="SUBMIT" id="panel-submit">
</form>

$("#proposal-form").submit(function (e) {
        e.preventDefault();
         $("#proposal-form").validate({
            onfocusout : true,
             errorPlacement: function(error, element) {
                error.appendTo( element.parent("input").next("input") );
             },
            rules: {
                proposal_name: {
                    required: true,
                    minlength: 2
                },
                proposal_email: {
                    required: true,
                    email: true
                },
                proposal_phone: {
                    required: true,
                    digits: true,
                    minlength: 10
                },
                proposal_location: {
                    required: true,
                    minlength: 2
                }
            },
            messages: {
                proposal_name: {
                    required: "Please enter your name",
                    minlength: "Your name seems a bit short."
                },
                proposal_email: {
                    required: "Please enter your email address",
                    email: "Please enter a valid email address"
                },
                proposal_phone: {
                    required: "Please enter your phone number",
                    digits: "Please enter a valid phone number",
                    minlength: "Your number seems a bit short."
                },
                proposal_location: {
                    required: "Please enter your name",
                    minlength: "Your name seems a bit short, doesn't it?"
                }
            },
            submitHandler: function(form) {
            var proposal_name = $('#proposal-name').val();
            var proposal_email = $('#proposal-email').val();
            var proposal_phone = $('#proposal-phone').val();
            var proposal_location = $('#proposal-location').val();

                $.ajax({
                    url: "php/proposal-send.php", 
                    type: "POST",
                    data: {
                        "proposal_name": proposal_name,
                        "proposal_email": proposal_email,
                        "proposal_phone": proposal_phone,
                        "proposal_location": proposal_location
                    },
                    success: function (data) {
                        if (data == "Error!") {
                            alert(data);
                        } else {
                            $("#proposal-form")[0].reset();
                            $('#proposal-panel-inner').hide();
                            $('#proposal-success').fadeIn();
                            function successProposal() {
                                $('#proposal-panel').removeClass('active');
                                $('html').removeClass('is-navOpen');
                                $('.ssm-overlay').fadeOut();
                            }
                            setTimeout (successProposal, 2000)
                        }
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        alert(textStatus + " | " + errorThrown);
                    }
                });
            }
        });
    });

Answer 1

编辑：验证规则和消息将与输入元素的名称相匹配。

请提供与验证规则中指定的相同的输入控件名称。

Answer 2

Does anyone see what I am doing wrong?

您 OP 代码中的标记不包含 name 属性。没有 name 属性，验证将根本不起作用。 See documentation。您不仅必须具有 name 属性，而且只有这些名称可以在 .validate() 的 rules 对象中使用。

rules: {
    proposal_name: {  // <- this MUST match the NAME attribute only
        required: true,
        minlength: 2
    }
    ....

这里的另一个主要问题是 .validate() 方法包含在 .submit() 处理程序中。由于 .validate() 方法只是插件的初始化，并且提交事件已经在内部捕获和处理，因此您不需要自己的 .submit() 事件处理程序。 （这正是需要两次点击的原因）。 编辑：click 处理程序没有太大区别。不需要也没有意义（强调"initialization"，因为.validate()是初始化方法）。

$("#proposal-form").submit(function (e) {  // <- NOT needed
    e.preventDefault();                    // <- NOT needed
    $("#proposal-form").validate({
        onfocusout: true,                  // <- 'true' is NOT valid
        ....

您也不需要 onfocusout: true 因为 true is not an acceptable parameter for this option。默认行为是在聚焦时触发验证，因此将 onfocusout 设置为 true 将破坏此插件。它只能设置为 false 或覆盖函数。

$(document).ready(function() {         // ensure DOM is ready
    $("#proposal-form").validate({     // initialize plugin
        // rules & options
        ....

最后，您的 errorPlacement 函数使用的 jQuery DOM 遍历根据发布的标记似乎没有任何意义。

element.parent("input").next("input")

input 的父项旁边没有 input。输入的父元素是 div，下一个元素是 div。下一个输入是 inside of this div that is next to the parent.为什么要将错误消息放在后面的输入元素上也是没有意义的，尤其是对于永远不会显示消息的最后一个元素。

演示：jsfiddle.net/Lhouzn84/

Jquery 验证是否允许提交不符合规则

Jquery Validate allowing submit with rules not met

javascript

jquery

jquery-validate