Question

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

Answer 1

Tooltipster版本2.1,3.0和＆amp;的解决方案4.0都包含在这个答案中。

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

Tooltipster v2.1

首先，在显示错误的所有特定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'); } }); });

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

Tooltipster v4.0更新

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

我还将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表示错误。它也不会打开一条消息，如果它没有显示给用户（这会导致它打开一个空白的工具提示，然后立即关闭，这看起来很奇怪）。

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

2 个答案: