您的代码存在一些问题。
1) .validate()
is the 初始化插件的方法,而不是测试表单的方法。换句话说,不要将其放在click
处理程序,否则当您需要它时它不会准备好。放.validate()
在 DOM 就绪事件处理程序内部,因此在创建页面时会触发一次,然后表单立即准备好进行验证。
2) 没有这样的选项onblur
对于这个插件。它被称为onfocusout
并且该选项已默认激活。将此类选项设置为true无效 http://jqueryvalidation.org/validate#onfocusout并且可能会破坏某些东西,因此只需将其完全排除在初始化之外即可。
3)没有这样的选项/函数调用afterValidation:
。你不能只是“发明”回调函数......jQuery 插件必须有这些东西已经专门内置于其中 http://docs.jquery.com/Plugins/Validation/validate#toptions。如果您想在有效表单上触发某些内容,请使用提供的submitHandler:
回调函数。
submitHandler: function (form) {
alert('is good');
return false;
}
4) 用一个<input type="submit" />
or a <button type="submit">Submit</button>
用于表单的提交。这样,插件就可以自动捕获点击事件并按设计处理提交。
5)小注意事项:对于您的自定义消息,只需使用{0}
并且规则的参数将自动插入。这种代码更容易维护。
minlength: "Password must be at least {0} characters long",
工作演示:http://jsfiddle.net/J9N3g/ http://jsfiddle.net/J9N3g/
我建议您在此处查看完整文档:http://docs.jquery.com/Plugins/Validation http://docs.jquery.com/Plugins/Validation
jQuery:
$(document).ready(function () {
$("#passwordResetForm").validate({
rules: {
password: {
required: true,
minlength: 8,
maxlength: 40,
remote: {
url: "/ajax/isPasswordOK",
data: {
product: function () {
return $("#password").val();
}
}
}
},
confirmPassword: {
required: true,
equalTo: "#password"
},
},
messages: {
password: {
required: "Please enter a password",
minlength: "Password must be at least {0} characters long",
remote: "Password should contain: <li>At least one upper case character <li>At least one lower case character <li>At least one number <li>And may not contain any of the following: \\;-\")(&*='|$"
},
confirmPassword: {
required: "Please confirm your password",
equalTo: "The passwords do not match"
},
},
onkeyup: false, //turn off auto validate whilst typing
submitHandler: function (form) {
alert('is good');
return false;
}
});
});
HTML:
<form id="passwordResetForm" style="width: 480px; margin: auto;">
<div class="row">
<p class="lead">Let's reset that password</p>
</div>
<div class="row">
<div class="small-8 large-4 columns">
<label>New Password:</label>
</div>
<div class="small-12 large-6 columns">
<input name="password" id="password" type="password" size="20" />
</div>
</div>
<div class="row">
<div class="small-8 large-4 columns">
<label>Confirm Password:</label>
</div>
<div class="small-12 large-6 columns">
<input name="confirmPassword" id="confirmPassword" type="password" size="20" />
</div>
</div>
<div class="row">
<div class="large-offset-10 small-3 large-1 columns">
<input type="submit" id="passwordResetButton" class="small button" />
</div>
</div>
</form>