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

Question

我想使用Tooltipster插件来显示jQuery Validate插件生成的表单错误.

jQuery for Validate插件:

$(document).ready(function () {

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

});

jQuery for Tooltipster插件:

$(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插件(带有任何选项):form

$(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的高级选项与一起success:并errorPlacement:内置到验证插件回调函数来自动显示和隐藏工具提示如下:

$(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插件中删除.

我也替换了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:https: //jsfiddle.net/h5grrrr9/