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

我想使用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
            }
        }
    });

});

用于工具提示插件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插件的用法，以便在工具提示中显示验证错误？

最佳答案

工具提示2.1、3.0和4.0版本的解决方案包含在此答案中。

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

工具提示v2.1

首先，在上初始化将显示错误的所有特定form元素上的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

编辑:更新了代码以利用13年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的DEMO:jsfiddle.net/2DUX2/3/



Tooltipster v4.0的更新

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

我还用success替换了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进行的DEMO:https://jsfiddle.net/h5grrrr9/