jquery验证: focusCleanup: true and focusInvalid: false don't work as expected

Question

我正在使用 Joern 的 jquery validation plugin 1.6.

我的目标是实现以下行为:一旦用户聚焦某个元素，就删除该元素的错误消息。据我了解，设置“focusCleanup:true”应该可以解决这个问题。

但是(至少在我的浏览器(Linux 上的 Firefox 3.5.7)上)，如果我单击，我只会得到所需的行为(即，一旦聚焦字段就会消失的错误消息)进入田野；它无法正确处理按 Tab 键进入字段。

示例代码:

HTML:

   <form id='abc' name='abc'>
    <input type="text" id="t1" name="t1"/>
    <input type="text" id="t2" name="t2"/>
    <input type="submit" id="submit" value='submit'/> 
    </form>

JS:

   $("#abc").validate({
   focusCleanup: true,
   focusInvalid: false,

    rules: {t1: {required: true, email:true}, t2: {required: true,email:true}}
});

我设置“focusInvalid: false”，因为文档说应该避免组合 focusCleanup 和 focusInvalid；根据我的经验，注释掉该行没有什么区别。

我做错了什么吗？

Answer 1

您所经历的是正确的行为，只是可能有点违反直觉。 You can see your code in a demo here 。当您点击时，您仅聚焦文本框，但是当您点击 Tab 时，您会引发 2 个重要事件，您将同时触发 focusin 和 keyup。

由于您触发了keyup，所以它正在清除错误，但是因为您在框中输入了一些内容(它不区分制表符)来自任何其他键，例如字母)...但随后它会重新评估该框在每个 keyup 上是否有效，显示与之前相同的错误，因为该选项卡对那...因为它没有添加任何文字。

如果您想禁用 onkeyup 验证，它将停止这样做，如下所示:

$("#abc").validate({
  focusCleanup: true,
  rules: {t1: {required: true, email:true}, t2: {required: true,email:true}},
  onkeyup: false,
});​

For comparison, here's that code in a demo ，因此您可以将其与上面的原始演示进行比较。