jQuery验证在提交事件上没有正确验证[重复]答案

【问题标题】：jQuery validation not validating proper on submit event [duplicate]jQuery验证在提交事件上没有正确验证[重复]
【发布时间】：2014-11-05 06:50:10
【问题描述】：

我正在使用jQuery validation plugin，并且已经多次使用表单验证，但第一次遇到这个问题，不明白为什么不验证。

问题：当我第一次点击提交按钮时，表单验证没有出现，但是当我点击第二次验证消息时出现。

jQuery 代码：

$(document).ready(function() {
    $(document.body).on('submit', 'form#register-form', function(event) {
        event.preventDefault();
        $("#register-form").validate({

            // Specify the validation rules
            rules : {
                firstname : "required",
                lastname : "required"
            },

            // Specify the validation error messages
            messages : {
                firstname : "Please enter your first name",
                lastname : "Please enter your last name"
            }
        });
    });
});

HTML 代码：

<h1>Register here</h1>

<form action="#" method="post" id="register-form">
    <div class="label">
        First Name
    </div>
    <input type="text" id="firstname" name="firstname" />
    <br />
    <div class="label">
        Last Name
    </div>
    <input type="text" id="lastname" name="lastname" />
    <br />
    <div style="margin-left:140px;">
        <input type="submit" name="submit" value="Submit" />
    </div>
</form>

JSFiddle：http://jsfiddle.net/mananpatel/68vgh7x1/1/

知道我哪里做错了。

【问题讨论】：

标签： javascript jquery forms jquery-validate

【解决方案1】：

在您的情况下，您仅在第一次提交完成时才初始化验证插件，因此在第一次提交操作期间不会调用该插件。

您需要在提交处理程序之外初始化验证插件。您可以使用验证框架提供的submitHandler 选项来提交表单，而不是使用您自己的提交处理程序——它只会在表单有效时被调用。否则在提交处理程序中，您必须检查表单是否有效。

 $("#register-form").validate({

     // Specify the validation rules
     rules: {
         firstname: "required",
         lastname: "required"
     },

     // Specify the validation error messages
     messages: {
         firstname: "Please enter your first name",
         lastname: "Please enter your last name"
     },
     
     submitHandler: function(){
         //do your form submit here
         return false;
     }
 });

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>


<h1>Register here</h1>

<!-- The form that will be parsed by jQuery before submit -->
<form action="#" method="post" id="register-form">
    <div class="label">First Name</div>
    <input type="text" id="firstname" name="firstname" />
    <br />
    <div class="label">Last Name</div>
    <input type="text" id="lastname" name="lastname" />
    <br />
    <div style="margin-left:140px;">
        <input type="submit" name="submit" value="Submit" />
    </div>
</form>

【讨论】：

【解决方案2】：

您正在调用方法 onsubmit。而不是在 DOM 就绪时调用此验证。看看这个：

http://jsfiddle.net/68vgh7x1/3/

 $("#register-form").validate({
        // Specify the validation rules
        rules: {
            firstname: "required",
            lastname: "required"
        },

        // Specify the validation error messages
        messages: {
            firstname: "Please enter your first name",
            lastname: "Please enter your last name"
        }
    });

【讨论】：

【解决方案3】：

$(document).ready(function() {
    $("#register-form").validate({

        // Specify the validation rules
        rules : {
            firstname : "required",
            lastname : "required"
        },

        // Specify the validation error messages
        messages : {
            firstname : "Please enter your first name",
            lastname : "Please enter your last name"
        }
    });
    // adding submit event is unnecessary.
});

【讨论】：

【解决方案4】：

如果您使用的是 HTML5，我建议使用元素属性：

required="true"

http://jsfiddle.net/sud6L2bn/

来源：http://jqueryvalidation.org/files/demo/

PS：考虑使用标签元素来标记字段。

【讨论】：