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

Question

我遇到了一些麻烦，让JQueryUI Tooltip Widget与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. 检查是否存在工具提示（如果发生了多次验证），如果它确实将其销毁。
  
2. 使用相应的消息
创建工具提示   
3. 显示工具提示
  

但我得到一个consol错误：

  

未捕获错误：工具提示小部件实例

没有此类方法“显示”

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

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');
    });
});