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

Question

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

});

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

Answer 1

此答案中包含 Tooltipster 版本 2.1、3.0 和 4.0 的解决方案。

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

---

工具提示器 v2.1

首先，在 all 将显示错误的特定 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

编辑：更新代码以利用 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 选项已从 Tooltipster 插件的 4.0 版本中删除。

我还将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/

Answer 2

Sparky 的回答一直是我网站验证的主要内容，但升级到 Tooltipster 4 需要进行一些更改。以下是我的工作方式，并进行了一些改进。

在您的页面上，在 head 部分包含 tooltipster css 和一个主题 css（以及您在其页面上描述的主题子类的任何主题 css）。

<link rel="stylesheet" type="text/css" href="/styles/tooltipster.bundle.css">
<link rel="stylesheet" type="text/css" href="/styles/tooltipster/sideTip/themes/tooltipster-sideTip-light.min.css">

此外，您需要包含 tooltipster 的 javascript 文件。您还需要 jquery-validation javascript。

<script src="/js/tooltipster.bundle.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>

现在，在另一个 javascript 文件或某些脚本标记中，您需要放置验证代码以及工具提示代码。这是我拥有的网页中的一个，Sparky 答案的更改位于顶部。

$(document).ready(function(){

    $('#form input[type="text"]').tooltipster({ //find more options on the tooltipster page
        trigger: 'custom', // default is 'hover' which is no good here
        onlyOne: false,    // allow multiple tips to be open at a time
        position: 'top',
        animation: 'grow', 
        theme: ['tooltipster-light'] //put your themes here
    });

    //form validation initialization
    $("#form").validate({
        errorPlacement: function (error, element) {
            if (error[0].innerHTML != null && error[0].innerHTML !== "") {
                $(element).tooltipster('content', $(error).text());
                $(element).tooltipster('open'); //open only if the error message is not blank. By default jquery-validate will return a label with no actual text in it so we have to check the innerHTML.
            }
        },
        success: function (label, element) {
            var obj = $(element);
            if (obj.hasClass('tooltipstered') && obj.hasClass('error')) {
                $(element).tooltipster('close'); //hide no longer works in v4, must use close
            }   
        },
        rules: {
            // your rules
            ......
        }
    });

});

现在，当您在违反所列规则之一的字段中键入内容时，框上方会出现一个弹出窗口，说明 jquery-validate 所说的内容是错误的。如果消息中没有任何内容可以显示给用户，它也不会打开消息（这会导致它打开一个空白工具提示然后立即关闭，这看起来很奇怪）。