使用 jQuery Validate 和 qTip2 成功输入输入时出错答案

【问题标题】：Getting error on successful input entry using jQuery Validate and qTip2使用 jQuery Validate 和 qTip2 成功输入输入时出错
【发布时间】：2013-07-19 17:14:34
【问题描述】：

我之前使用自定义 CSS，然后使用 jquery UI 进行表单错误验证布局以及强大的 jQuery Validation script。一位朋友最近推荐我查看qTip2，因为它提供了一些有趣的自定义，而其他自定义则更难实现。在过去的 48 小时里，我一直害怕测试它的决定。我希望我只是犯了一个愚蠢的错误，但是当我在本地机器上测试时，我收到了各种奇怪的错误。例如，使用此 JSFIddle 中的代码：

http://jsfiddle.net/rktWw/1/

表单完全忽略验证并像通常那样处理页面。如果我删除success:"valid" 选择器（或任何success:），页面将正常工作，但成功更改后不会删除表单错误。

我上面设置的 JS Fiddle 也会抛出各种错误。例如，如果您点击一次提交，则会按预期抛出错误。但是，如果您在名称字段中输入文本，然后再次点击“提交”，则表单会尝试处理（由于脚本中的 submitHandler:，这应该不会发生。

有人对这些问题有任何指导吗？

【问题讨论】：

我曾尝试联系 qTip2 论坛，但他们的注册已失效，因此我无法将其用作帮助方法（它要求提供不存在的验证码）今天
我非常尊重 Craig 以及他对 qTip2 所做的工作，但是，似乎只要他修复了一个错误，之前的错误就会回来。这是使用此插件进行的永无止境的 beta 测试。请参阅 Tooltipser 和此 answer 向您展示如何将它与 jQuery Validate 一起使用。
@Sparky - 感谢您的链接。您是否有其他推荐用于此功能的插件，或者只是回到 jQuery UI/自定义类方法？
如我之前对链接的评论中所示，我推荐 Tooltipster jQuery 插件。（不依赖 jQuery UI）

标签： jquery forms jquery-validate qtip2

【解决方案1】：

这就是我在一些网站上使用 qTip2 的方式。正常工作非常麻烦，需要 qTip 开发人员的大量帮助。我将 qTip .destroy 方法放在 success 回调函数中，而不是像您所做的那样链接在 errorPlacement 中。

$(document).ready(function () {

    $('#myform').validate({
        rules: {
            //
        },
        success: function (error) {
            setTimeout(function () { // Use a mini timeout to make sure the tooltip is rendred before hiding it
                $('#myform').find('.valid').qtip('destroy');
            }, 1);
        },
        submitHandler: function (form) {
             // my ajax
            return false;
        },
        errorPlacement: function (error, element) {
            var cornersAt = ['left center', 'top left'], // Set positioning based on the elements position in the form
                cornersMy = ['right bottom', 'bottom right'],
                flipIt = $(element).parents('div.left').length > 0,
                position = {
                    at: cornersAt[flipIt ? 0 : 1],
                    my: cornersMy[flipIt ? 0 : 1]
                },
                offset = flipIt ? 6 : 35;
            $(element).filter(':not(.valid)').qtip({ // Apply the tooltip only if it isn't valid
                overwrite: false,
                content: error,
                position: position,
                show: {
                    event: false,
                    ready: true
                },
                hide: false,
                style: { // Make it red... the classic error colour!
                    classes: 'ui-tooltip-error ui-tooltip-rounded',
                    tip: {
                        corner: true,
                        offset: offset
                    }
                }
            }).qtip('option', 'content.text', error);
        } // closes errorPlacement
    }); // closes validate()

});

对于一个替代的 jQuery Tooltip 插件，我最近切换到 Tooltipster，它与 jQuery Validate 集成要干净得多。

请参阅此答案以获取演示：https://stackoverflow.com/a/14741689/594235

【讨论】：