Question

我有以下表单，我正在尝试添加jquery验证。我的问题是，当我点击提交时，没有任何验证消息出现，如果我点击提交两次，则表单提交。所以，基本上验证不起作用。

有人看到我做错了吗？

我正在使用以下库：

<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

有人看到我做错了吗？

OP代码中的标记不包含name属性。如果没有name属性，则验证根本不起作用。 See documentation。您不仅必须拥有name个属性，还可以在rules的{{1}}对象中使用这些名称。

.validate()

这里的另一个主要问题是rules: { proposal_name: { // <- this MUST match the NAME attribute only required: true, minlength: 2 } ....方法包含在.validate()处理程序中。由于.submit()方法只是插件的初始化，并且已经在内部捕获并处理了提交事件，因此您不需要自己的.validate()事件处理程序。 （这正是需要两次点击的原因）。 编辑：.submit()处理程序没有太大区别。它不是必需的，没有任何意义（强调＆＃34;初始化＆＃34;，如click中的初始化方法）。

.validate()

您也不需要$("#proposal-form").submit(function (e) { // <- NOT needed e.preventDefault(); // <- NOT needed $("#proposal-form").validate({ onfocusout: true, // <- 'true' is NOT valid ....，因为true is not an acceptable parameter for this option。默认行为是在焦点输出时触发验证，因此将onfocusout: true设置为onfocusout会破坏此插件。它只能设置为true或覆盖功能。

false

最后，基于发布的标记，$(document).ready(function() { // ensure DOM is ready $("#proposal-form").validate({ // initialize plugin // rules & options ....函数使用的jQuery DOM遍历似乎没有任何意义。

errorPlacement

element.parent("input").next("input")的父级旁边没有input。输入的父级是input，下一个元素是div。下一个输入是父{2}旁边的。为什么你想把错误信息放在下面的输入元素上是没有意义的，特别是对于最后一个永远不会显示信息的元素。

DEMO：jsfiddle.net/Lhouzn84/

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

2 个答案: