0

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

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

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

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

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

4

1 回答 1

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

于 2013-07-19T17:28:22.333 回答