Question

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

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

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

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

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

Answer 1

这就是我在某些网站上使用qTip2的方法。正常工作并需要qTip开发人员的大量帮助非常繁琐。我将qTip .destroy方法放在success回调函数中，而不是像{1}}那样在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

使用jQuery Validate和qTip2获取成功输入条目的错误

1 个答案: