我想使用
Tooltipster plugin显示
jQuery Validate plugin生成的表单错误。
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>
解决方法
Tooltipster 2.1，3.0和&答案中包含4.0。
Tooltipster v2.1
首先，在将显示错误的所有特定表单元素上初始化Tooltipster插件(with any options)：
$(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 options和success: 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');
}
});
});
工作演示：http://jsfiddle.net/2DUX2
编辑：更新的代码，以利用在2/12/13版本2.1中发布的新Tooltipster API功能
Tooltipster v3.0的更新
Tooltipster 3.0是出来的，因此不工作与上述相同。以下代码提供了更新的示例。当该消息尚未更改时，此版本具有在每次击键时不调用Tooltipster的附加好处。
(不要忘记，如上所述，您仍然需要将.tooltipster()附加到相关的输入元素。)
$(document).ready(function () {
// initialize validate plugin on the form
$('#myform').validate({
// any other options & rules,element) {
var lastError = $(element).data('lastError'),newError = $(error).text();
$(element).data('lastError',newError);
if(newError !== '' && newError !== lastError){
$(element).tooltipster('content',newError);
$(element).tooltipster('show');
}
},element) {
$(element).tooltipster('hide');
}
});
});
DEMO使用Tooltipster v3.0：jsfiddle.net/2DUX2/3/
Tooltipster v4.0的更新
请注意，唯一的一个选项已从4.0版本的Tooltipster插件中删除。
我也用unhighlight取代了成功回调。在“可选”字段中，当字段随后被消除时，错误消息从未被删除，这是因为在这些情况下成功函数不会触发。这个问题没有被隔离到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: {
....
DEMO使用Tooltipster v4.0：https://jsfiddle.net/h5grrrr9/
