Question

我正在使用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/

知道我做错了什么。

Answer 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>

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

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

Answer 4

如果你正在使用HTML5，我建议使用元素属性：

required="true"

http://jsfiddle.net/sud6L2bn/

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

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

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

4 个答案: