如何在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"textareaselect等,则必须相应地调整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,这看起来很奇怪)。