jQuery验证无法按预期工作 [英] jQuery validate not working as expected
问题描述
我使用的是jQuery validate()，而当我只是拥有以下内容时:
I'm using jQuery validate() and when I simply have:
$("#myForm").validate({
onfocusout: function (valueToBeTested) {
if($(valueToBeTested).hasClass('required')){
if(this.element(valueToBeTested)){
$(valueToBeTested).addClass('valid');
} else{
$(valueToBeTested).addClass('invalid');
};
};
}
rules:
{
...(rules here)
}
});
它工作正常.但是当我尝试添加类似onkeyup或submitHandler的内容时:
it works fine. But when I try to add something like onkeyup or submitHandler:
$("#myForm").validate({
onfocusout: function (valueToBeTested) {
if($(valueToBeTested).hasClass('required')){
if(this.element(valueToBeTested)){
$(valueToBeTested).addClass('valid');
} else{
$(valueToBeTested).addClass('invalid');
};
};
},
submitHandler: function(i){
var badForm = false;
var errmsg = "<img src=\"invalid.png\"/><br/>";
var $required_fields = $(".required");
$required_fields.each( function(i) {
if(!($(i).valid())){
errmsg += $(i).name + " is required<br/>";
badForm = true;
}
if(badForm){
alert("bad");
$('#errdiv').html(errmsg).show();
window.scrollTo(0,0);
}
});
},
rules:
{
...
}
});
它开始不起作用:
1)在这种情况下，似乎甚至都不会进入submitHandler块.当我尝试在onkeyup块中复制onfocusout功能时，情况相同.
2)当第二个块存在时，它会与onfocusout块混淆，在某种意义上onfocusout块将在任何给定字段上第一次起作用，然后不再起作用.
it starts not working:
1) in this scenario, it seems to never even enter the submitHandler block. Same when I try to duplicate the onfocusout functionality inside an onkeyup block.
2) when the second block is present, it messes with the onfocusout block in the sense that the onfocusout block will work the first time on any given field, then not again.
我觉得我缺少明显的东西，因为我认为我正在按照文档中的说明进行操作.我希望对这三个都进行验证. onfocusout和onkeyup几乎相同，但是submitHandler应该做同样的事情，加上填充并显示错误div.
I feel that I'm missing something obvious since I think I'm doing what the documentation says. I want the validation to happen on all three. The onfocusout and onkeyup are pretty much the same, but the submitHandlershould do the same, plus populate and show the error div.
我在这里想念什么?
谢谢.
推荐答案
完全删除您的自定义onfocusout和onkeyup函数.您完全是在滥用这些.
Completely remove your custom onfocusout and onkeyup functions. You are totally misusing these.
onfocusout和onkeyup函数仅控制 验证的触发方式，并且您破坏了此功能.
The onfocusout and onkeyup functions only control how validation is triggered and you have broken this functionality.
默认情况下，在抠起和聚焦时已经自动完成了添加/删除错误/有效类的操作.如果您需要重写类的应用方式，则可以编写自定义的highlight和unhighlight函数.但是，根据您的代码，我也没有理由这样做.您只需要将错误类别从默认的error更改为invalid.
Adding/removing the error/valid classes is already being done automatically by default on keyup and focusout. If you need to over-ride how classes are applied, you would write custom highlight and unhighlight functions. However, based on your code, I see no reason to do this either. You would only need to change the error class from the default error into invalid.
errorClass: "invalid",
validClass: "valid" // <- default value
就submitHandler而言，根据文档，它仅在表单有效时才触发，因此在条件中放入用于测试有效性的条件是没有用的.
As far as the submitHandler, as per docs it only fires when the form is valid, so it's useless to put a conditional inside that tests for validity.
您也永远不会将与错误消息或其HTML结构有关的代码放入submitHandler中.您将为此使用errorPlacement和/或errorElement. success选项用于在字段有效时利用消息标签元素，因为在这种情况下它们通常是隐藏的.您将使用showErrors，errorContainer和errorLabelContainer来构造集中式错误消息框.
You also would never put code in the submitHandler that has anything to do with the error messages or their HTML structure. You would use errorPlacement and/or errorElement for this. The success option is used for leveraging the message label elements when the field is valid, since they're normally hidden in this case. You would use showErrors, errorContainer, and errorLabelContainer to construct a centralized error message box.
我建议您参阅文档，以了解如何正确使用各种选项和功能.
I suggest you refer to the documentation to learn how the various options and functions are properly used.
换句话说，您似乎正在试图迫使插件执行它本来应该做的事情.通过不适当地使用这些指定的选项，您将破坏插件，并且仍然不清楚最终要实现的目标.如果您只想覆盖默认的分配类，则无需重写所有默认功能，只需使用errorClass和validClass选项.
In other words, you seem to be trying to force the plugin to do what it's already supposed to be doing. By improperly over riding these designated options, you're breaking the plugin, and it's still somewhat unclear what you're ultimately trying to achieve. If you're only trying to over-ride the default assigned classes, you don't need to re-write all the default functionality, just use the errorClass and validClass options.
$('#myForm').validate({
errorClass: "invalid",
validClass: "valid", // <- already the default value, not needed to specify
rules: {
...
}
});
简单演示: http://jsfiddle.net/9ax47efu/
Simple demo: http://jsfiddle.net/9ax47efu/
编辑:
经过多次评论，确定OP希望将验证行为从懒惰"切换为急切".
After many comments, it was determined that the OP wants to switch the validation behavior from "Lazy" to "Eager".
修改默认值以删除惰性"验证...
Defaults modified to remove "Lazy" validation...
onkeyup: function(element, event) {
var excludedKeys = [
16, 17, 18, 20, 35, 36, 37,
38, 39, 40, 45, 144, 225
];
if (event.which === 9 && this.elementValue(element) === "" || $.inArray(event.keyCode, excludedKeys) !== -1) {
return;
} else {
this.element(element);
}
},
onfocusout: function(element) {
if (!this.checkable(element)) {
this.element(element);
}
}
演示2: http://jsfiddle.net/c8zq6bzu/
DEMO 2: http://jsfiddle.net/c8zq6bzu/
这篇关于jQuery验证无法按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
