3

我正在使用jQuery Validation 插件和qTip2 插件来显示错误。

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

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

它在这里按预期工作（带有标准错误的验证插件（无 qTip2））：

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

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

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

在元素上，error该类被正确删除并替换为valid该类，但显然success处理程序没有触发。但是，qTip2 依赖于success触发处理程序以销毁任何错误气泡。

有两件事会迫使success处理程序触发并清除此错误。

1）点击提交按钮。

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

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

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

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

也许我关于success处理程序不触发的假设是错误的，但我还不能破译我需要做什么才能让这一切正常工作。

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

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

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

这是使用 qTip2 和默认字段值的某种组合，导致所有这些令人头疼的问题。希望你们中的一个人能看到我在哪里失明。

4

1 回答 1

3

通过大量的实验，这是我到目前为止所学到的（除了迫切希望有更详细的文档可用）：

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

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

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

解决方法（临时？）：

我添加了onfocusout处理程序，.validate如下所示：

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

http://jsfiddle.net/MNKMP/

onfocusout通常是一个布尔值（根据文档），所以当你失去焦点时，把一个函数放在那里会破坏正常的功能。我不得不valid()在第一行调用来替换onfocusout丢失的正常功能。（我不明白的是文档如何没有提到您可以用函数替换布尔值）。（编辑：我在插件内部达到了顶峰，尽管有文档，但onfocusout它不是布尔值，它是一个函数。我注意到其中有很多东西完全从官方文档中丢失或反对）1

然后，由于在失去焦点时我不能依赖success处理程序来触发，所以我添加了一行，如果类说字段是valid.

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

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

我会在时间允许的情况下扩展这个答案。

编辑2：

1澄清onkeyup:,onfocusout:和可能的许多其他选项：根据文档true，这些选项默认为("on")，但它们确实由内部函数支持。换句话说，你可以在你的设置中设置这些选项，但你不能在不破坏插件设置它们false.validate()true

于 2012-01-30T08:54:55.247 回答