首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在Tooltipster工具提示中显示来自jQuery验证插件的消息?

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

Stack Overflow用户
提问于 2013-02-07 08:46:22
回答 2查看 57.5K关注 0票数 20

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

});

用于工具提示程序插件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插件的使用,以使验证错误出现在工具提示中?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-02-07 08:46:22

本答案中包括针对工具提示程序的解决方案2.1、3.0和4.0版。

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

Tooltipster v2.1

首先,初始化Tooltipster plugin (with any options) on 所有特定于的form元素,它们将显示错误:

$(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 optionssuccess: 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');
        }
    });

});

工作演示:

编辑:更新代码以利用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的演示:

Tooltipster v4.0的更新

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

我还用unhighlight替换了success回调。在“可选”字段上,当字段随后被清空时,错误消息从未被删除...这是因为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的演示:

票数 42
EN

Stack Overflow用户

发布于 2016-09-29 23:16:29

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文件中,还是在某些脚本标记中,您需要将验证代码和tooltipster代码放在一起。这是我的一个网页中的一个,来自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所说的内容是错误的。如果消息中没有任何内容显示给用户,它也不会打开消息(这会导致它打开一个空白的工具提示,然后立即关闭,这看起来很奇怪)。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14741688

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档