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

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

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

解决方法

Tooltipster 2.1，3.0和&答案中包含4.0。

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

编辑：更新的代码，以利用在2/12/13版本2.1中发布的新Tooltipster API功能

Tooltipster v3.0的更新

Tooltipster 3.0是出来的，因此不工作与上述相同。以下代码提供了更新的示例。当该消息尚未更改时，此版本具有在每次击键时不调用Tooltipster的附加好处。

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

$(document).ready(function () {

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

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

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

});

DEMO使用Tooltipster v3.0：jsfiddle.net/2DUX2/3/

Tooltipster v4.0的更新

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

我也用unhighlight取代了成功回调。在“可选”字段中，当字段随后被消除时，错误消息从未被删除，这是因为在这些情况下成功函数不会触发。这个问题没有被隔离到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: {
        ....

DEMO使用Tooltipster v4.0：https://jsfiddle.net/h5grrrr9/

原文地址：https://www.jb51.cc/jquery/182091.html