[英]jQuery Validation Plugin and Tooltipster Plugin error
[英]jQuery form validation plugin and tooltipster plugin to validate select menu?
我制作了一个简单的脚本来使用jQuery验证脚本和工具提示来验证我的表单元素,以显示错误消息。
该脚本可以正常工作,但不能与选择菜单一起使用
$(document).ready(function(){
$.validator.addMethod("valueNotEquals", function(value, element, arg){
return arg != value;
}, "Value must not equal arg.");
$('#eway input[type="text"]').tooltipster({
trigger: 'custom',
onlyOne: false,
position: 'right'
});
$('.inputfield select').tooltipster({
trigger: 'custom',
onlyOne: false,
position: 'right'
});
(function($,W,D)
{
var JQUERY4U = {};
JQUERY4U.UTIL =
{
setupFormValidation: function()
{
//form validation rules
$("#eway").validate({
errorPlacement: function (error, element) {
$(element).tooltipster('update', $(error).text());
$(element).tooltipster('show');
},
rules: {
txtFirstName: "required",
txtLastName: "required",
txtEmail: {
required: true,
email: true
},
txtMobileNumber: "required",
Type: {
valueNotEquals: "Default"
}
},
messages: {
txtFirstName: "Please enter your firstname",
txtLastName: "Please enter your lastname",
txtEmail: "Please enter a valid email address",
txtMobileNumber: "please enter a valid mobile number",
Type: "Please select Donation Type"
},
submitHandler: function(form) {
form.submit();
}
});
}
}
//when the dom has loaded setup form validation rules
$(D).ready(function($) {
JQUERY4U.UTIL.setupFormValidation();
});
})(jQuery, window, document);
$('#eway').submit(function(e) {
e.preventDefault();
});
});
我不知道是什么问题。
可能是因为tooltipster功能显示了选择菜单的错误消息,我错过了什么吗?
$('.inputfield select').tooltipster({
trigger: 'custom',
onlyOne: false,
position: 'right'
});
或其与我添加的用于验证选择菜单的验证方法?
$.validator.addMethod("valueNotEquals", function(value, element, arg){
return arg != value;
}, "Value must not equal arg.");
您需要在以下行上分配要使用的元素...
$('#eway input[type="text"], #eway select').tooltipster({
它为我工作。
我发现了困难的方法,但是由于selectmenus创建了一个单独的跨度,因此您必须将提示附加到ID为“#” + mySelect +“-button”的跨度上,然后专门为其初始化工具提示
errorPlacement: function (error, element) {
if (element.context.nodeName === "SELECT"){
element = $('#' + element.context.name + '-button');
$(element).tooltipster({
trigger: 'custom',
onlyOne: false,
positionTracker: true,
position: 'right',
updateAnimation: false,
animation: 'fall',
positionTrackerCallback: function(){
this.hide();
}
});
}
var lastError = $(element).data('lastError'), // get the last message if one exists
newError = $(error).text(); // set the current message
$(element).data('lastError', newError); // set "lastError" to the current message for the next time 'errorPlacement' is called
if(newError !== '' && newError !== lastError){ // make sure the message is not blank and not equal to the last message before allowing the Tooltip to update itself
$(element)
.tooltipster('content', newError) // insert content into tooltip
.tooltipster('show'); // show the tooltip
}
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.