如何在Tooltipster工具提示中显示jQuery验证插件中的消息？

Question

如何在Tooltipster工具提示中显示jQuery验证插件中的消息？我想用Tooltipster插件若要显示由jQuery验证插件.用于验证插件的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 4需要做一些修改。这是我工作的方式，还有一些改进。

在页面中，将工具提示CSS和主题CSS包含在Head部分(以及您在其页面中描述的对主题进行子类划分的任何主题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验证javascript。

<script src="/js/tooltipster.bundle.min.js"></script><script src=" 
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-Validance说什么是错误的。如果其中没有显示用户的信息，它也不会打开消息(这将导致它打开一个空白的工具提示，然后立即关闭，这看起来很奇怪)。

Answer 2

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