jquery validate：focusCleanup：true和focusInvalid：false不按预期工作 [英] jquery validate: focusCleanup: true and focusInvalid: false don't work as expected

问题描述

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

I am using Joern's jquery validation plugin 1.6.

我的目标是具有以下行为：一旦用户关注它，就删除元素的错误消息。根据我的理解设置'focusCleanup：true'应该照顾这个。

My goal is to have the following behavior: remove the error message for an element once the user focuses it. From what I understand setting 'focusCleanup: true' should take care of this.

但是（至少在我的浏览器上（Linux 3.5上的Firefox 3.5.7）），我只如果我点击进入该字段，则获得所需的行为（即，一旦您将其聚焦，字段的错误消息就会消失）;它没有正确处理标签到字段中。

However (at least on my browser (Firefox 3.5.7 on Linux)), I only get the desired behavior (ie, error message for a field disappearing once you focus it) if I click into the field; it doesn't handle tabbing into the field correctly.

示例代码：

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;根据我的经验，评论出这条线没什么区别。

I am setting 'focusInvalid: false' because the docs say one should avoid combining focusCleanup and focusInvalid; in my experience commenting out that line makes no difference.

我做错了什么？

推荐答案

您所遇到的是正确的行为，可能有点违反直觉。 您可以在此处的演示中查看您的代码。单击时，您仅聚焦文本框，但是当您选项卡导致2个重要事件时，您将触发 focusin 和 keyup 。

What you are experiencing is the correct behavior, just maybe a bit counter-intuitive. You can see your code in a demo here. When you click, you're only focusing the textbox, however when you tab you're causing 2 events that matter, you're triggering both focusin and keyup.

由于你正在触发 keyup 正在发生的事情是 清除错误，但因为你在盒子里输入了一些东西（它没有区分tab和任何其他键，比如一个字母）......但是它会重新评估该盒子在每个 keyup上是否有效，显示与之前相同的错误，因为选项卡对此没有任何影响...因为它没有添加任何文本。

Since you're triggering the keyup what's happening is it is clearing the error, but because you're typing something in they box (it doesn't distinguish tab from any other key, like a letter)...but then it's re-evaluating whether the box is valid on every keyup, displaying the same error as before since the tab didn't have any effect on that...since it didn't add any text.

如果要禁用 onkeyup 验证，它将停止这样做，如下所示：

If you want to disable onkeyup validation it'll stop doing that, like this:

$("#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, so you can compare it with the original demo above.

这篇关于jquery validate：focusCleanup：true和focusInvalid：false不按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！