如何在Tooltipster工具提示中显示来自jQueryvalidation插件的消息？
我想使用Tooltipster插件来显示由jQuery Validate插件生成的表单错误。
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插件的使用，以便validation错误出现在工具提示内？
此答案中包含Tooltipster版本2.1,3.0和4.0的解决scheme。
请注意 ， .tooltipster()仅在下面的示例中附加到type="text" input元素。 如果您的form包含其他types的数据input元素，如type="radio" ， type="date" ， textarea ， select等，则必须相应地调整select器或创build.tooltipster()的其他实例元素。 否则，一切都会失败，错误。
Tooltipster v2.1
首先，在将显示错误的所有特定form元素上初始化Tooltipster插件（ 带有任何选项 ）：
$(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的高级选项以及success:以及内置于Validate插件中的errorPlacement:callback函数，以自动显示和隐藏工具提示，如下所示：
$(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
编辑 ：更新代码，以利用2/12/13版本2.1中发布的新的Tooltipster APIfunction
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更新
请注意，从Tooltipster插件的4.0版本中删除了onlyOne选项。
我也用高unhighlight取代了successcallback。 在“可选”字段中，错误消息从未被删除，当字段随后被清空…这是因为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的DEMO： https ： //jsfiddle.net/h5grrrr9/
Sparky的答案一直是我网站validation的主要内容，但升级到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">
另外，您需要包含工具提示的JavaScript文件。 你还需要jQueryvalidation的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文件或一些脚本标记，你需要把你的validation代码以及你的工具提示代码。 这里有一个来自我的网页，从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 ...... } }); });
现在，当你在违反列表规则的字段中input某个字段时，会popup一个popup窗口，说明jquery-validate所说的错误。 它也不会打开一个消息，如果没有任何东西显示用户（这会导致它打开一个空白的工具提示，然后立即closures，这看起来很奇怪）。
