jQuery验证未验证提交事件是否正确
问题描述：
我使用jQuery validation plugin，并且已经使用了很多次进行表单验证，但第一次面对这个问题，不明白为什么不验证。jQuery验证未验证提交事件是否正确
Issue：当我点击第一次提交按钮时，表单验证没有appering，但当我第二次出现验证信息时出现。
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准备就绪而不是此验证。 看一看这样的：
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.
});
答