jquery - 如何在 Tooltipster 工具提示中显示来自 jQuery Validate 插件的消息？

Question

我想使用 Tooltipster plugin显示 jQuery Validate plugin 生成的表单错误。

用于验证插件的 jQuery:

$(document).ready(function () {

    $('#myform').validate({ // initialize jQuery Validate
        // other options,
        rules: {
            field1: {
                required: true,
                email: true
            },
            field2: {
                required: true,
                minlength: 5
            }
        }
    });

});

Tooltipster 插件的 jQuery:

$(document).ready(function () {

    $('.tooltip').tooltipster({ /* options */ });  // initialize tooltipster

});

HTML:

<form id="myform">
    <input type="text" name="field1" />
    <input type="text" name="field2" />
    <br/>
    <input type="submit" />
</form>

如何集成这两个 jQuery 插件的使用，以便验证错误出现在工具提示中？

Answer 1

此答案中包含 Tooltipster 版本 2.1、3.0 和 4.0 的解决方案。

注意，.tooltipster() 仅附加到 type="text" input 元素我的例子如下。如果您的 form 包含其他类型的数据输入元素，例如 type="radio"、type="date"、textarea、select 等，那么您必须相应地调整选择器或为这些其他元素创建 .tooltipster() 的其他实例。否则，一切都会失败并出现错误。

<小时/>

Tooltipster v2.1

首先，在将显示错误的所有特定表单元素上初始化 Tooltipster 插件 ( with any options ):

$(document).ready(function () {

    // initialize tooltipster on form input elements
    $('#myform input[type="text"]').tooltipster({ 
        trigger: 'custom', // default is 'hover' which is no good here
        onlyOne: false,    // allow multiple tips to be open at a time
        position: 'right'  // display the tips to the right of the element
    });

});

第二，使用Tooltipster's advanced options以及success: and errorPlacement: callback functions built into the Validate plugin自动显示和隐藏工具提示，如下所示:

$(document).ready(function () {

    // initialize validate plugin on the form
    $('#myform').validate({
        // any other options & rules,
        errorPlacement: function (error, element) {
            $(element).tooltipster('update', $(error).text());
            $(element).tooltipster('show');
        },
        success: function (label, element) {
            $(element).tooltipster('hide');
        }
    });

});

工作演示:http://jsfiddle.net/2DUX2

编辑:更新了代码以利用 2013 年 2 月 12 日发布的 2.1 版中的新 Tooltipster API 功能

<小时/><小时/>

Tooltipster v3.0 更新

Tooltipster 3.0 已推出，因此其工作方式与上面所示的不同。以下代码提供了更新的示例。此版本还有一个额外的好处，即当消息尚未更改时，每次击键时都不会调用 Tooltipster。

(不要忘记您仍然需要将 .tooltipster() 附加到相关 input 元素，如上所示。)

$(document).ready(function () {

    // initialize validate plugin on the form
    $('#myform').validate({
        // any other options & rules,
        errorPlacement: function (error, element) {
            var lastError = $(element).data('lastError'),
                newError = $(error).text();

            $(element).data('lastError', newError);

            if(newError !== '' && newError !== lastError){
                $(element).tooltipster('content', newError);
                $(element).tooltipster('show');
            }
        },
        success: function (label, element) {
            $(element).tooltipster('hide');
        }
    });

});

使用 Tooltipster v3.0 进行演示:jsfiddle.net/2DUX2/3/

<小时/><小时/>

Tooltipster v4.0 更新

请注意，onlyOne 选项已从 4.0 版本的 Tooltipster 插件中删除。

我还用 unhighlight 替换了 success 回调。在“可选”字段上，当该字段随后被清空时，错误消息从未被删除...这是因为在这些情况下不会触发成功函数。此问题并非仅出现在 Tooltipster 版本 4 中，但以下代码可以解决该问题。

// initialize Tooltipster on text input elements
$('input[type="text"]').tooltipster({ //find more options on the tooltipster page
    trigger: 'custom', // default is 'hover' which is no good here
    position: 'top',
    animation: 'grow'
});

// initialize jQuery Validate
$("#myform").validate({
    errorPlacement: function (error, element) {
        var ele = $(element),
            err = $(error),
            msg = err.text();
        if (msg != null && msg !== '') {
            ele.tooltipster('content', msg);
            ele.tooltipster('open');
        }
    },
    unhighlight: function(element, errorClass, validClass) {
        $(element).removeClass(errorClass).addClass(validClass).tooltipster('close');
    },
    rules: {
        ....

使用 Tooltipster v4.0 进行演示:https://jsfiddle.net/h5grrrr9/