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

问题描述

我想使用 Tooltipster 插件 来显示由 jQuery 验证插件.

I'd like to use the Tooltipster plugin to display form errors generated by the 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 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 插件的使用，以便在工具提示中显示验证错误?

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() 仅附加到 type="text" 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.

工具提示 v2.1

首先，在 all 上初始化 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: 内置于验证插件中的回调函数 自动显示和隐藏工具提示如下:

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

编辑:更新代码以利用 2/12/13 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/

Tooltipster v4.0 更新

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

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/

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