如何在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插件的使用，以便驗證錯誤出現在工具提示中？
3 回答
鳳凰求蠱
TA貢獻1825條經驗 獲得超4個贊
<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">
<script src="/js/tooltipster.bundle.min.js"></script><script src=" validate.min.js"></script>
$(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
......
}
});});
- 3 回答
- 0 關注
- 443 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消