如何在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&nbsp;rel="stylesheet"&nbsp;type="text/css"&nbsp;href="/styles/tooltipster.bundle.css"><link&nbsp;rel="stylesheet"&nbsp;type="text/css"&nbsp; href="/styles/tooltipster/sideTip/themes/tooltipster-sideTip-light.min.css">此外，您还需要包含tooltipster的javascript文件。您还需要jQuery验证javascript。<script&nbsp;src="/js/tooltipster.bundle.min.js"></script><script&nbsp;src="&nbsp; validate.min.js"></script>现在，无论是在另一个javascript文件中还是在某些脚本标记中，您都需要将验证代码和工具提示代码放在一起。这是我的网页上的一个，Sparky的答案的变化在最上面。$(document).ready(function(){ &nbsp;&nbsp;&nbsp;&nbsp;$('#form&nbsp;input[type="text"]').tooltipster({&nbsp;//find&nbsp;more&nbsp;options&nbsp;on&nbsp;the&nbsp;tooltipster&nbsp;page &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;trigger:&nbsp;'custom',&nbsp;//&nbsp;default&nbsp;is&nbsp;'hover'&nbsp;which&nbsp;is&nbsp;no&nbsp;good&nbsp;here &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onlyOne:&nbsp;false,&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;allow&nbsp;multiple&nbsp;tips&nbsp;to&nbsp;be&nbsp;open&nbsp;at&nbsp;a&nbsp;time &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;'top', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;animation:&nbsp;'grow',&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;theme:&nbsp;['tooltipster-light']&nbsp;//put&nbsp;your&nbsp;themes&nbsp;here &nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;//form&nbsp;validation&nbsp;initialization &nbsp;&nbsp;&nbsp;&nbsp;$("#form").validate({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errorPlacement:&nbsp;function&nbsp;(error,&nbsp;element)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(error[0].innerHTML&nbsp;!=&nbsp;null&nbsp;&&&nbsp;error[0].innerHTML&nbsp;!==&nbsp;"")&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(element).tooltipster('content',&nbsp;$(error).text()); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(element).tooltipster('open');&nbsp;//open&nbsp;only&nbsp;if&nbsp;the&nbsp;error&nbsp;message&nbsp;is&nbsp;not&nbsp;blank.&nbsp;By&nbsp;default&nbsp;jquery-validate&nbsp;will&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;a&nbsp;label&nbsp;with&nbsp;no&nbsp;actual&nbsp;text&nbsp;in&nbsp;it&nbsp;so&nbsp;we&nbsp;have&nbsp;to&nbsp;check&nbsp;the&nbsp;innerHTML. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success:&nbsp;function&nbsp;(label,&nbsp;element)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;obj&nbsp;=&nbsp;$(element); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(obj.hasClass('tooltipstered')&nbsp;&&&nbsp;obj.hasClass('error'))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(element).tooltipster('close');&nbsp;//hide&nbsp;no&nbsp;longer&nbsp;works&nbsp;in&nbsp;v4,&nbsp;must&nbsp;use&nbsp;close &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rules:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;your&nbsp;rules &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...... &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;});});现在，当您在字段中键入违反所列规则之一的内容时，会在框上方弹出一个弹出，说明jQuery-Validance说什么是错误的。如果其中没有显示用户的信息，它也不会打开消息(这将导致它打开一个空白的工具提示，然后立即关闭，这看起来很奇怪)。

Answer 2

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