Question

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

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

当我填写可选的电话号码字段时，即使不需要，我仍然会验证电话号码。但是，如果用户输入的数字无效（收到错误），改变主意并退回电话号码字段，则错误消息应该消失。

此处正常工作（带有标准错误的验证插件（无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以及导致所有这些令人头疼的默认字段值的一些组合。希望你们其中一个人能看到我在哪里失明。

Answer 1

通过大量实验，这是我迄今为止所学到的内容（除了非常希望有更详细的文档可用）：

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

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

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

解决方法（临时？）：

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

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

http://jsfiddle.net/MNKMP/

onfocusout通常是一个布尔值（as per the docs），因此当你失去焦点时，在那里放一个函数会破坏正常的功能。我必须在第一行调用valid()来替换丢失的正常onfocusout功能。（我不明白的是文档没有提到你可以用函数替换一个布尔值）。（编辑：我在插件中取得了一个高峰，尽管有文档，onfocusout不是布尔值，但它是一个函数。我注意到其中有很多东西要么完全缺失，要么与之相反。官方文件）¹

然后，因为当焦点丢失时我不能依赖success处理程序触发，所以如果类说明字段是valid，我会添加一行来破坏qTip气泡。

关于我的解决方法的唯一事情是它稍微改变了正常行为。通常，当您第一次加载页面时，您可以在“必填”字段之间切换而不显示任何错误消息，直到您点击提交按钮，然后点亮所有空的必填字段。安装我的解决方法后，只需选中＆amp;从一个空字段中点亮一条错误消息。

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

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

编辑2：

¹澄清onkeyup:，onfocusout:以及可能的其他许多选项：这些选项默认为true（ “on”）according to the documentation，但它们确实得到了内部函数的支持。换句话说，您可以在false设置中将这些选项设置为.validate()，但无法将其设置为true而不会破坏插件。

尽管“有效”类，jQuery Validation插件并不能激发成功

1 个答案: