jQuery验证工作不正常

Question

我使用jQuery验证（），当我只是有：

$("#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功能只能控制验证如何被触发，你已经打破了这个功能。

默认情况下，添加/删除错误/有效类已在键控和聚焦输出中自动完成。如果您需要覆盖如何应用课程，您可以编写自定义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希望从 “懒” 到“切换确认行为急于”。

默认值修改为删除 “懒惰” 审定......

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/