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

Posted 2023-05-07

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

【英文标题】：How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?

【发布时间】：2013-01-22 09:30:17

【问题描述】：

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

【参考方案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/

【讨论】：

我正在尝试使用您的 JS，但我收到此错误并且不知道如何解决它，因为我是 JS 新手：TypeError: $(...).validate is not a function  submitHandler : function (form) // 用于演示

@starbucks，听起来你忘了包含 jQuery Validate 插件的代码。

@starbucks，点击this link 并浏览我的其他答案以获取类似内容。否则，请随时 read the FAQ 并发布新问题，因为 cmets 部分不是新问题/问题的地方。

@Sparky 好问题，甚至更好的答案！ :) 不幸的是，我无法让它与动态创建的控件一起工作:(

@eddy，很抱歉您遇到问题，但在另一个问题的答案中劫持 cmets 并不是在这里寻求帮助的正确方式。正如我已经说过的，请发布一个全新的问题。

【参考方案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 所说的内容是错误的。如果消息中没有任何内容可以显示给用户，它也不会打开消息（这会导致它打开一个空白工具提示然后立即关闭，这看起来很奇怪）。

【讨论】：

当您可以看到$(error).text() 时，为什么还要使用error[0].innerHTML？

在你的success中，如果var obj = $(element)，那么为什么不使用obj.tooltipster('close')呢？

另请注意，onlyOne 选项已从 Tooltipster 中删除。

我编辑了我的答案，将您的解决方案整合到我的解决方案中，包括一个 jsFiddle。感谢您发布您的答案。

此解决方案解决了 Sparky 示例中输入类型 != 文本（例如日期）时出现的工具提示错误。