jQuery验证在提交事件时未正确验证

jQuery validation not validating proper on submit event

本文关键字：验证 事件 提交 jQuery      更新时间：2023-09-26

我使用的是jQuery验证插件，已经使用过很多次表单验证，但第一次遇到这个问题，不明白为什么不进行验证。

问题：当我第一次点击提交按钮时，表单验证不出现，但当我第二次点击时，会显示验证消息。

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/

知道我哪里做错了吗。

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

您需要从提交处理程序中初始化验证插件。您可以使用验证框架提供的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>

您正在调用onsubmit方法。相反，在DOM就绪时调用validate。看看这个：

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"
        }
    });

$(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.
});

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

required="true"

http://jsfiddle.net/sud6L2bn/

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

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

相关文章：