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

问题描述

我想使用 Tooltipster插件来显示.

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 :

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

How would I integrate the usage of these two jQuery plugins so that validation errors appear inside the tooltips?

推荐答案

Tooltipster 2.1、3.0及更高版本的解决方案此答案中包含4.0.

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

NOTE that .tooltipster() is only attached to a type="text" input element in my examples below. If your form contains other kinds of data input elements such as type="radio", type="date", textarea, select, etc., then you must adjust your selector accordingly or create additional instances of .tooltipster() for these other elements. Otherwise, everything will fail with errors.

Tooltipster v2.1

首先，在全部上初始化Tooltipster插件( ). strong>特定的form元素，将显示错误:

First, initialize the Tooltipster plugin (with any options) on all specific form elements that will display errors:

$(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:内置于Validate插件中的回调函数，以自动显示和隐藏如下的工具提示:

Second, use Tooltipster's advanced options along with the success: and errorPlacement: callback functions built into the Validate plugin to automatically show and hide the tooltips as follows:

$(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

Working Demo: http://jsfiddle.net/2DUX2

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

EDIT: Updated code to take advantage of the new Tooltipster API features released in version 2.1 on 2/12/13

Tooltipster v3.0的更新

Tooltipster 3.0已发布，因此无法如上所示那样工作.以下代码提供了更新的示例.此版本的另一个好处是，在消息尚未更改时，不会在每次击键时都调用Tooltipster.

Tooltipster 3.0 is out and as such doesn't work the same as illustrated above. The following code provides an updated example. This version has the added benefit of not calling Tooltipster on every keystroke when the message has not yet changed.

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

(Don't forget that you still need to attach .tooltipster() to your relevant input elements as illustrated above.)

$(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/

DEMO using Tooltipster v3.0: jsfiddle.net/2DUX2/3/

Tooltipster v4.0的更新

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

Note that the onlyOne option has been removed from the 4.0 version of the Tooltipster plugin.

我还用unhighlight替换了success回调.在可选"字段上，该字段随后被清空时，从未删除错误消息...这是因为success函数在这种情况下不会触发.这个问题并不仅限于Tooltipster版本4，但是以下代码解决了该问题.

I also replaced the success callback with unhighlight. On "optional" fields, the error message was never removed when the field was subsequently blanked out... this is because the success function does not fire under these circumstances. This issue is not isolated to Tooltipster version 4, however the following code solves it moving forward.

// 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/

DEMO using Tooltipster v4.0: https://jsfiddle.net/h5grrrr9/

这篇关于如何在Tooltipster工具提示中显示来自jQuery Validate插件的消息?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！