jQuery的验证插件不工作的领域模糊 [英] jquery validate plugin not working on blur of the fields
问题描述
我需要jquery validate插件以在字段模糊时验证我的所有字段.目前仅在提交表单时进行验证.这是我的HTML HTML
I need jquery validate plugin to validate all my fields on blur of the fields. Currently its validating only on submit of the form. This is my html HTML
<input class=" required minlength aplhawithaposonly" type="text" id="firstName" name="firstName" minlength="3" maxlength="40" />
jQuery
$(document).ready(function() {
form = $('#submitForm');
if (form.length) {
form.validate({
ignoreTitle: false,
onfocusout: false,
onkeyup: false,
onclick: false,
submitHandler: function() {
form[0].submit();
},
messages: {
firstName:{
required: "First Name is required.",
minlength: "First Name entered is invalid.",
aplhawithaposonly:"First Name entered is invalid."
}
}
});
});
aplhawithaposonly写在另一个js文件中
aplhawithaposonly is written in another js file
jQuery.validator.addMethod("aplhawithaposonly", function(value, element) {
return this.optional(element) || /^[a-zA-Z'\s]+$/i.test(value);
}, "Please enter Alphabetic or apostrophe ' only.");
现在，仅在提交表单时才对页面进行验证.但是我希望验证发生在视场模糊的情况下.我试图保持onfocusout:true.但这还没有解决.有人可以帮我实现这个目标吗? 这是正在使用的js文件jquery.validate.min.js. 我应该为此使用其他版本的jquery吗?请引导我.
Now the page is getting validated only on submit of the form. But I want the validation to happen on blur of the field. I tried to keep onfocusout:true. But that is not solving. Can someone please help me how to achieve this? This is the js file that is being used jquery.validate.min.js. Should I use any other version of jquery for this? Please guide me..
推荐答案
引用OP:
"... 我希望验证在字段模糊时进行 ..."
"...I want the validation to happen on blur of the field..."
如果您希望重点关注验证，那么为什么要在选项中设置onfocusout: false?
If you want validation on focus out, then why do you have onfocusout: false set in your options?
焦点对准验证已经是默认，因此无需设置任何选项来实现此功能.
Validation on focus out is already the default, so there is no need to set any options to achieve this behavior.
"...我试图保留
onfocusout:true.但这还没有解决.有人可以帮我实现这一目标吗?"
"...I tried to keep
onfocusout:true. But that is not solving. Can someone please help me how to achieve this?"
根据文档，布尔值true不是有效值" .
As per the documentation, "boolean true is not a valid value".
onfocusout
类型:布尔值或Function()
在模糊时验证元素(复选框/单选按钮除外).如果不输入任何内容，则全部 规则会被跳过，除非该字段已被标记为 无效的.设置为功能以自行决定何时运行 验证. 布尔值true不是有效值.
onfocusout
Type: Boolean or Function()
Validate elements (except checkboxes/radio buttons) on blur. If nothing is entered, all rules are skipped, except when the field was already marked as invalid. Set to a Function to decide for yourself when to run validation. A boolean true is not a valid value.
换句话说，由于onfocusout验证已经是默认行为，因此根本不应该声明此选项...只需将其忽略即可.仅当要禁用它时才使用onfocusout:false，或在要覆盖它时仅使用onfocusout: function() {....同样，如果您只想要默认行为，请不要使用onfocusout:true.
In other words, since onfocusout validation is already the default behavior, you are not supposed to declare this option at all... just leave it out. Only use onfocusout:false when you want to disable it or onfocusout: function() {... when you want to over-ride it. Again, never use onfocusout:true if you simply want the default behavior.
相同的主体适用于onsubmit，onkeyup和onclick选项.
The same principal applies to the onsubmit, onkeyup, and onclick options.
关于此...
if (form.length) {
form.validate({
....
在将.validate()方法附加到表单之前，绝对不需要测试表单的存在. 对于任何jQuery选择器，如果它与现有元素都不匹配，则根本不会发生任何事情.
There is absolutely no need to test for the form's existence before attaching the .validate() method to it. With any jQuery selector, if it doesn't match an existing element, simply nothing will happen.
只需将.validate()放在DOM ready事件处理程序中...
Simply put .validate() within the DOM ready event handler...
$(document).ready(function() {
$('#yourform').validate({ // <- initializes the plugin
// options, rules, and callbacks
});
});
关于此...
Regarding this...
<input class="required minlength aplhawithaposonly" type="text" id="firstName"
name="firstName" minlength="3" maxlength="40" />
由于您已经将minlength声明为HTML5验证属性，因此在class内不需要minlength.此外，将minlength放在class里面是行不通的，因为无法传递参数.在class中只能声明可以用布尔值true声明的规则.
Since you've already declared minlength as a HTML5 validation attribute, there is no need for minlength inside of class. Besides, putting minlength inside of class does not work because there's no way to pass the parameter. Only rules that can be declared with a boolean true can be declared within class.
关于此...
submitHandler: function() {
form[0].submit();
},
这正是插件的默认行为...它是多余的代码，因此请删除它.仅当需要覆盖默认的form操作(例如，使用ajax())时，才使用submitHandler回调.
This is exactly the default behavior of the plugin... it's superfluous code, so take it out. Only use submitHandler callback if you need to over-ride the default form action, for example, with ajax().
关于此...
ignoreTitle: false,
根据文档，这已经是默认行为.最好把它拿出来.
As per the documentation, this is already the default behavior. Best to take it out.
这篇关于jQuery的验证插件不工作的领域模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
