显示基于 parsley 验证的 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. 检查工具提示是否存在（发生多次验证时），如果它确实破坏了它。
2. 使用适当的消息创建工具提示
3. 显示工具提示

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

未捕获的错误：工具提示小部件实例没有此类方法“显示”

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

Answer 1

您的代码存在一些问题：

1. 根据API documentation，主要问题是您正在调用.tooltip('show');，但没有这样的方法或事件。你必须使用.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');
    });
});