jQuery验证未按预期工作

我使用的是jQuery validate（），当我有：

$("#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

的内容时：

$("#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:
        {
       ...
    }
}); 

$（“#myForm”）。验证({
onfocusout:函数（值待测试）{
if（$（valueToBeTested）.hasClass（'required'））{
if（此元素（值待测试））{
$（valueToBeTested）.addClass（'valid'）；
}否则{
$（valueToBeTested）.addClass（'invalid'）；
};
};
},
提交人：功能（i）{
var badForm=false；
var errmsg=“
”；
变量$required_字段=$（“.required”）；
$required_字段。每个（函数（i）{
如果（！（$（i）.valid（））{
errmsg+=$（i）.name+“是必需的
”；
badForm=true；
}
如果（不良形式）{
警惕（“坏”）；
$（'#errdiv'）.html（errmsg.show（）；
滚动到（0,0）；
}
});
},
规则：
{
...
}
}); 

它开始不工作： 1） 在这种情况下，它似乎从未进入

submitHandler

块。当我尝试在

onkeyup

块内复制

onfocusout

功能时也是如此。 2） 当出现第二个块时，它会与

onfocusout

块发生冲突，因为

onfocusout

块将在任何给定字段上第一次工作，然后不再工作

我觉得我遗漏了一些明显的东西，因为我认为我在按照文档所说的做。我希望对所有三个进行验证。

onfocusout

和

onkeyup

几乎相同，但是

submitHandler

应该做同样的事情，并且填充并显示错误div

我错过了什么

---

谢谢。

完全删除自定义的

onfocusout

和

onkeyup

功能。你完全误用了这些

onfocusout

和

onkeyup

功能仅控制如何触发验证，并且您已破坏此功能

默认情况下，在keyup和focusout上已自动添加/删除错误/有效类。如果需要了解类的应用方式，可以编写自定义的

高亮显示

和

取消高亮显示

函数。但是，根据您的代码，我也看不出有什么理由这样做。您只需将错误类从默认的

error

更改为

invalid

errorClass: "invalid",
validClass: "valid" // <- default value

简单演示：

---

编辑：

经过多次评论，确定OP希望将验证行为从“懒惰”切换到“渴望”

修改默认值以删除“惰性”验证

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:

谢谢。我实际上已经越过了这个密码。在我等待别人回答的时候，我想出来了好的，你是说如果我简单地把errorClass放在“invalid”中，它会处理那个部分，但是有效类呢？我该在哪里定义它呢？好吧，我试过了，但没用。我收到错误：$（“#myForm”）.validate（{onfocusout:true，onkeyup:true，errorClass:“无效”，规则：{…}）@如我在答复中所述，请参阅文件。很可能会导致新的问题。@Drevidovie，“但是有效类呢？”~再次。

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);
    }
}