jQuery 验证未按预期工作

Question

我正在使用 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:
        {
       ...
    }
});

它开始不起作用： 1) 在这种情况下，它似乎永远不会进入 submitHandler 块。当我尝试在 onkeyup 块中复制 onfocusout 功能时也是如此。 2) 当第二个块出现时，它会与 onfocusout 块混淆，因为 onfocusout 块将在任何给定字段上第一次工作，然后不再工作。

我觉得我遗漏了一些明显的东西，因为我认为我正在按照文档中的说明进行操作。我希望对所有三个进行验证。 onfocusout 和 onkeyup 几乎相同，但 submitHandler 应该做同样的事情，加上填充并显示错误 div.

我在这里错过了什么？

谢谢。

Answer 1

完全删除自定义 onfocusout 和 onkeyup 函数。你完全在滥用这些。

onfocusout 和 onkeyup 函数仅控制 如何触发 验证，您已破坏此功能.

Adding/removing error/valid classes 已经默认在 keyup 和 focusout 上自动完成。如果您需要覆盖 classes 的应用方式，您可以编写自定义 highlight 和 unhighlight 函数。但是，根据您的代码，我认为也没有理由这样做。您只需要将错误 [=81=] 从默认的 error 更改为 invalid。

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

就 submitHandler 而言，根据文档，它仅在表单有效时触发，因此在测试有效性的条件中放置条件是没有用的。

您也永远不会在 submitHandler 中放置与错误消息或其 HTML 结构有任何关系的代码。为此，您可以使用 errorPlacement and/or errorElement。 success 选项用于在字段有效时利用消息标签元素，因为在这种情况下它们通常是隐藏的。您将使用 showErrors、errorContainer 和 errorLabelContainer 来构造一个集中式错误消息框。

我建议你refer to the documentation学习如何正确使用各种选项和功能。

换句话说，您似乎在试图强制插件执行它应该执行的操作。通过不正确地覆盖这些指定的选项，您正在破坏插件，并且您最终想要实现的目标仍然有些不清楚。如果您只是想覆盖默认分配的 classes，则不需要重写所有默认功能，只需使用 errorClass 和 validClass 选项即可。

$('#myForm').validate({
    errorClass: "invalid",
    validClass: "valid", // <- already the default value, not needed to specify
    rules: {
        ...
    }
});

简单演示：http://jsfiddle.net/9ax47efu/

编辑:

经过多次评论，确定 OP 想要将验证行为从 "Lazy" 切换到 "Eager"。

修改默认值以删除 "Lazy" 验证...

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/

jQuery 验证未按预期工作

jQuery validate not working as expected

jquery

jquery-validate