我想使用Tooltipster plugin来显示由jQuery Validate plugin生成的表单错误。
用于验证插件的jQuery
$(document).ready(function () {
$('#myform').validate({ // initialize jQuery Validate
// other options,
rules: {
field1: {
required: true,
email: true
},
field2: {
required: true,
minlength: 5
}
}
});
});
用于工具提示程序插件的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插件的使用,以使验证错误出现在工具提示中?
发布于 2013-02-07 08:46:22
本答案中包括针对工具提示程序的解决方案2.1、3.0和4.0版。
请注意,在下面的示例中,.tooltipster()
仅附加到type="text"
input
元素。如果您的form
包含其他类型的数据输入元素,如type="radio"
、type="date"
、textarea
、select
等,那么您的必须相应地调整选择器,或者为这些其他元素创建额外的.tooltipster()
实例。否则,所有操作都将失败并出现错误。
Tooltipster v2.1
首先,初始化Tooltipster plugin (with any options) on 所有特定于的form
元素,它们将显示错误:
$(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');
}
});
});
工作演示:
编辑:更新代码以利用2013年2月12日发布的版本2.1中发布的新Tooltipster API功能
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的演示:
Tooltipster v4.0的更新
请注意,onlyOne
选项已从Tooltipster插件的4.0版本中删除。
我还用unhighlight
替换了success
回调。在“可选”字段上,当字段随后被清空时,错误消息从未被删除...这是因为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的演示:
发布于 2016-09-29 23:16:29
Sparky的回答一直是我网站验证的主要内容,但升级到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">
此外,您还需要包含tooltipster的javascript文件。您还需要jquery-validation 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文件中,还是在某些脚本标记中,您需要将验证代码和tooltipster代码放在一起。这是我的一个网页中的一个,来自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
......
}
});
});
现在,当您在字段中键入违反所列规则之一的内容时,框上方会弹出一个窗口,指出jquery-validate所说的内容是错误的。如果消息中没有任何内容显示给用户,它也不会打开消息(这会导致它打开一个空白的工具提示,然后立即关闭,这看起来很奇怪)。
https://stackoverflow.com/questions/14741688
复制相似问题