jquery验证插件无法处理字段模糊

Question

我需要jquery验证插件来验证模糊字段上的所有字段。目前它只在提交表单时进行验证。这是我的htmlHTML

<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文件中编写的

jQuery.validator.addMethod("aplhawithaposonly", function(value, element) {
return this.optional(element) || /^[a-zA-Z's]+$/i.test(value);
}, "Please enter Alphabetic or apostrophe ' only.");

现在页面只在提交表单时进行验证。但我希望验证发生在字段模糊时。我试着保持专注：没错。但这并不能解决问题。有人能帮我怎么做到这一点吗？这是正在使用的js文件jquery.validate.min.js。我应该使用任何其他版本的jquery吗？请引导我…

Answer 1

报价OP:

"…我希望在字段模糊时进行验证…">

如果您希望对焦点进行验证，那么为什么要在选项中设置onfocusout: false？

聚焦时的验证已经是默认，因此不需要设置任何选项来实现此行为。

"……我试图保留onfocusout:true。但这并不能解决问题。有人能帮我如何实现吗？">

根据文档，"布尔true不是有效值">。

onfocusout
类型：布尔或Function()
在模糊时验证元素(复选框/单选按钮除外)。如果未输入任何内容，则所有跳过规则，除非字段已标记为无效的设置为函数以自行决定何时运行验证布尔值true不是有效值

换句话说，由于onfocusout验证已经是默认行为，因此根本不应该声明此选项。。。把它放在一边。当你想禁用它时，只使用onfocusout:false，当你想超越它时，请使用onfocusout: function() {...。同样，如果你只是想要默认行为，请不要使用onfocusout:true。

相同的原则适用于onsubmit、onkeyup和onclick选项。

---

关于这个。。。

if (form.length) {
form.validate({ 
....

在将.validate()方法附加到表单之前，绝对不需要测试表单的存在性。对于任何jQuery选择器，如果它与现有元素不匹配，那么什么都不会发生

只需将.validate()放入DOM就绪事件处理程序中。。。

$(document).ready(function() {
$('#yourform').validate({  // <- initializes the plugin
// options, rules, and callbacks
});
});

---

关于这个。。。

<input class="required minlength aplhawithaposonly" type="text" id="firstName"
name="firstName" minlength="3" maxlength="40"  />

由于您已经将minlength声明为HTML5验证属性，因此不需要在class中使用minlength。此外，将minlength放入class中是不起作用的，因为无法传递参数。只有可以用布尔true声明的规则才能在class中声明。

---

关于这个。。。

submitHandler: function() {
form[0].submit();
},

这正是插件的默认行为。。。这是多余的代码，所以把它去掉。如果您需要超越默认的form操作，例如使用ajax()，则仅使用submitHandler回调。

---

关于这个。。。

ignoreTitle: false,

根据文档，这已经是默认行为。最好把它拿出来。