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块。当我尝试复制onfocusout块内的onkeyup功能时也是如此。 2）当第二个块存在时，它会与onfocusout块混淆，因为onfocusout块将在任何给定的字段上第一次起作用，然后不再起作用。

我觉得我错过了一些明显的东西，因为我认为我正在做文档所说的。我希望验证能在所有三个上进行。 onfocusout和onkeyup几乎相同，但submitHandler应该相同，另外填充并显示错误div。

我在这里缺少什么？

感谢。

Answer 1

完全删除自定义onfocusout和onkeyup功能。你完全滥用这些。

onfocusout和onkeyup功能仅控制如何验证，并且您已破坏此功能。

默认情况下，在keyup和focusout上已经自动添加/删除错误/有效类。如果您需要覆盖应用类的方式，则可以编写自定义highlight和unhighlight函数。但是，根据您的代码，我认为没有理由这样做。您只需将错误类别从默认error更改为invalid。

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

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

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

我建议您refer to the documentation了解如何正确使用各种选项和功能。

换句话说，您似乎试图强制插件执行它本已应该执行的操作。通过不正确地超过这些指定的选项，你打破了插件，并且仍然有点不清楚你最终想要实现什么。如果您只是试图覆盖默认分配的类，则无需重新编写所有默认功能，只需使用errorClass和validClass选项。

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

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

修改：

经过多次评论后，确定OP希望将验证行为从“Lazy”切换为“Eager”。

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

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

DEMO 2：http://jsfiddle.net/c8zq6bzu/

jQuery验证无法按预期工作

1 个答案: