尽管 "valid"类，jQuery 验证插件并未成功触发

Question

我正在使用jQuery Validation plugin以及 qTip2 plugin显示错误。

我设置了两个 jsFiddles 来演示我遇到的一个奇怪的问题。前两个字段是“必填”，第三和第四个字段是“可选”，而第三个字段是验证电话号码。

当我填写可选电话号码字段时，即使不是必需的，我仍然会验证电话号码。但是，如果用户输入无效号码(出现错误)，然后改变主意并在电话号码字段中退格，则错误消息应该消失。

它在这里按预期工作(带有标准错误的验证插件(无 qTip2)):

jsFiddle #1: http://jsfiddle.net/avJ54/2/

问题是使用 qTip2 显示错误时它不起作用:

jsFiddle #2: http://jsfiddle.net/WKryu/3/

在元素上，error 类已正确删除并替换为 valid 类，但显然 success 处理程序不会触发。但是，qTip2 依赖于success 处理程序来触发，以消除任何错误气泡。

有两件事将迫使成功处理程序触发并清除此错误。

1)点击提交按钮。

2)填写“必填”字段并失去焦点。

所以问题是:当可选字段被清空时，我似乎无法让 qTip2 立即删除可选字段上的错误气泡，类似于它在第一个 jsFiddle 中的工作方式。

由于success处理程序仅似乎在失去“必填”字段的焦点时触发，有没有办法让它在失去“必填”字段的焦点时触发任何字段？这样最容易解决问题。

编辑:我在成功处理程序上放置了一个alert()，它仅在您失去任何已验证字段的焦点时才会触发。奇怪的是，尽管我使用了 phone 方法，但只有在输入有效电话号码后失去焦点时才会触发成功处理程序。然而，从技术上讲，当该字段被清空并显示默认值时，它也是一个“有效”字段，但 success 不会触发。换句话说，当清空字段并失去焦点时，类会立即更改为 .valid 但 success 处理程序永远不会触发。这是最让我困惑的地方，也是我寻求解释的地方。

也许我对成功处理程序未触发的假设是错误的，但我还无法破译我需要做什么才能让这一切正常工作。

线索？:只需删除默认字段值即可使其正常工作...

jsFiddle #3: http://jsfiddle.net/BwNLs/

但是，这并不是我真正想要的(我需要默认字段值作为我设计的一部分)。显然，切换默认字段值在 jsFiddle #1 中不是问题……只有在引入 qTip2 时才成为问题。

使用 qTip2 和默认字段值的某种组合导致了所有这些令人头痛的问题。希望你们中的一个人能够看到我的盲点。

Answer 1

通过大量实验，这是我迄今为止学到的内容(除了迫切希望有更详细的文档可用):

1) success处理程序在失去刚刚通过特定异常进行验证的字段的焦点后立即触发:我认为这是一个计时问题...默认值在插件进行验证的同时放回。

2) success在上面的 jsFiddle 情况 1 和 2 中，处理程序在相同的实例上触发。不同之处在于第一个测试用例中的错误消息在 display:none 之间切换。和display:inline内部由插件实现。然而，在第二个测试用例中，qTip 消息气泡是通过 errorPlacement: 切换的。和success:处理程序。

3) valid和error在这两种情况下，类的切换都是相同的。在第二个测试用例中，似乎尽管类从 error 切换至 valid ，并不一定意味着success会火。看来虽然类(class)是valid ，将默认值放回该字段会以某种方式阻止 success从射击。为什么？

解决方法(临时？):

我添加了onfocusout处理程序至.validate像这样:

 onfocusout: function(element) {
     $(element).valid();
     $(element).filter('.valid').qtip('destroy');
 },

http://jsfiddle.net/MNKMP/

onfocusout通常是一个 bool 值( as per the docs )，因此当您失去焦点时，在其中放置一个函数会破坏正常功能。我必须调用 valid()第一行替换为正常的onfocusout失去的功能。 (我不明白的是，文档如何没有提到您可以用函数替换 bool 值)。 (编辑:我在插件中看到了一个峰值，尽管有文档， onfocusout 不是一个 bool 值，它是一个函数。我注意到其中有很多东西要么完全缺失，要么与官方文档相反) ¹

既然我不能依赖 success处理程序在焦点丢失时触发，我添加了一行，如果类说该字段是 valid ，则会破坏 qTip 气泡。 .

我的解决方法的唯一问题是它稍微改变了正常行为。通常，当您第一次加载页面时，您可以在“必填”字段之间进行切换，而不会出现任何错误消息，直到您点击提交按钮，然后该按钮会点亮所有空的必填字段。安装我的解决方法后，只需在空白字段中按 Tab 键即可点亮该错误消息。

我喜欢验证插件。我只是希望有一种可靠的方法来手动复制任何默认功能。似乎每次我手动使用一种方法时，其他默认行为都会产生神秘的无法解释的副作用。

如果时间允许，我将详细阐述这个答案。

<小时/>

编辑2:

¹ 关于 onkeyup: 的澄清, onfocusout: ，以及可能的许多其他选项:这些选项默认为 true (“上”)according to the documentation ，但它们确实有内部功能的支持。换句话说，您可以将这些选项设置为 false在您的.validate()内设置，但您不能将它们设置为 true不破坏插件。