javascript - 基于欧芹验证显示 JqueryUI 工具提示

Question

我在让 JQueryUI 工具提示小部件与欧芹验证一起工作时遇到了一些问题。这是我的代码:

    $.listen('parsley:field:error', function (fieldInstance) {
        var messages = ParsleyUI.getErrorsMessages(fieldInstance);

        if(fieldInstance.$element.tooltip('instance') != undefined) {
            fieldInstance.$element.tooltip('destroy');
        }

        fieldInstance.$element.tooltip({
            items: fieldInstance.$element,
            content: messages,
            show: 'pulsate'
        });

        fieldInstance.$element.tooltip('show');
    });

我的方法是:

1. Check if a tooltip exists (as multiple validation occur), if it does destroy it.
2. Create the tooltip with the appropriate message
3. Show the tooltip

但我只是得到一个控制台错误:

Uncaught Error: no such method 'show' for tooltip widget instance

此外，如果有人认为有更好的方法，请不要犹豫回答!

Answer 1

您的代码存在一些问题:

1. 主要问题是您正在调用 .tooltip('show');但是根据 API documentation 没有这样的方法或事件.你必须使用 .tooltip('open') .
2. content选项 accepts a function or string你正在传递一个数组。你需要内爆 messages类似 messages.join('<br />') 的数组
3. 为了仅在工具提示中显示错误，您需要更改 parlsey 的默认选项，特别是 errorsContainer和 errorsWrapper .

你的最终代码将是这样的(在 this jsfiddle 中测试):

$(document).ready(function() {
    $("#myForm").parsley({
        errorsContainer: function (ParsleyField) {
            return ParsleyField.$element.attr("title");
        },
        errorsWrapper: false
    });

    $.listen('parsley:field:error', function (fieldInstance) {
        var messages = ParsleyUI.getErrorsMessages(fieldInstance);

        if(fieldInstance.$element.tooltip('instance') != undefined) {
            fieldInstance.$element.tooltip('destroy');
        }

        fieldInstance.$element.tooltip({
            content: messages.join('<br />'),
            items: fieldInstance.$element,
            show: 'pulsate'
        });

        fieldInstance.$element.tooltip('open');
    });
});