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

Question

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

    $.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.join('<br />')
之类的东西来分解 messages 数组
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');
    });
});