如何在带有defaultValue的可选字段上使用jQuery Validator自定义方法? [英] How to use jQuery Validator custom method on optional field with defaultValue?
问题描述
我正在使用最新版本的 jQuery Validator插件以及jQuery(1.6.2).
在电话号码的可选字段中，我有一个defaultValue.
HTML:
<input type="text" class="autoclear blur" value="your telephone number" name="Phone" />
我安装了一种自定义方法，用于根据此线程 .这样的想法是，即使该字段是可选的，但如果/当输入文本时，我仍然要对其进行验证.
jQuery/JavaScript:
$(document).ready(function() {
var nameMsg = "Please enter your full name.",
emailMsg = "Please enter your email address.",
emailMsgV = "This is not a valid email address.",
commentsMsg = "Please enter your comments.";
$.validator.addMethod('phone', function (value, element) {
return this.optional(element) || /^[01]?[- .]?\(?[2-9]\d{2}\)?[- .]?\d{3}[- .]?\d{4}$/.test(value);
}, 'This is not a valid number.');
$('#contactForm').validate({
onkeyup: false,
validClass: 'valid',
rules: {
Name: {
required: true
},
email: {
required: true,
email: true
},
Phone: {
required: false,
phone: true
},
Comments: {
required: true
}
},
messages: {
Name: nameMsg,
email: {
defaultInvalid: emailMsg,
required: emailMsg,
email: emailMsgV
},
Comments: commentsMsg
},
success: function(error) {
setTimeout(function() { // Use a mini timeout to make sure the tooltip is rendred before hiding it
$('#contactForm').find('.valid').qtip('destroy');
}, 1);
},
submitHandler: function(form) {
$('#contactForm .autoclear').each(function() {
if (this.value === this.defaultValue) {
this.value = '';
}
});
form.submit();
},
errorPlacement: function(error, element) {
$(element).filter(':not(.valid)').qtip({
overwrite: false,
content: error,
position: {
my: 'left center',
at: 'right center'
},
show: {
event: false,
ready: true
},
hide: false
}).qtip('option', 'content.text', error);
} // closes errorPlacement
}) // closes validate()
}); // closes document.ready()
问题在于，由于我在此可选字段上有一个defaultValue，它也正在得到验证.
phone的自定义方法是否可以以这样的方式进行如果该字段保留为空白，它将忽略该字段上的defaultValue?
我尝试用if/then包围正则表达式，但这似乎不起作用.
$.validator.addMethod('phone', function (value, element) {
if (value != element.defaultValue) {
return this.optional(element) || /^[01]?[- .]?\(?[2-9]\d{2}\)?[- .]?\d{3}[- .]?\d{4}$/.test(value);
}
}, 'This is not a valid number');
考虑了它的工作原理后，我知道这是错误的方法……所以我迷路了.
似乎您需要从传递给addMethod的函数中返回某物:
$.validator.addMethod('phone', function (value, element) {
if (value != element.defaultValue) {
return this.optional(element) || /^[01]?[- .]?\(?[2-9]\d{2}\)?[- .]?\d{3}[- .]?\d{4}$/.test(value);
}
return true;
}, 'This is not a valid number');
示例: http://jsfiddle.net/L3S9e/
I'm using the latest version of the jQuery Validator plugin along with jQuery (1.6.2).
In my optional field for phone number, I have a defaultValue.
HTML:
<input type="text" class="autoclear blur" value="your telephone number" name="Phone" />
I installed a custom method for validating phone numbers as per this thread. The idea is that even though the field is optional, I still want to validate it if/when text is entered.
jQuery/JavaScript:
$(document).ready(function() {
var nameMsg = "Please enter your full name.",
emailMsg = "Please enter your email address.",
emailMsgV = "This is not a valid email address.",
commentsMsg = "Please enter your comments.";
$.validator.addMethod('phone', function (value, element) {
return this.optional(element) || /^[01]?[- .]?\(?[2-9]\d{2}\)?[- .]?\d{3}[- .]?\d{4}$/.test(value);
}, 'This is not a valid number.');
$('#contactForm').validate({
onkeyup: false,
validClass: 'valid',
rules: {
Name: {
required: true
},
email: {
required: true,
email: true
},
Phone: {
required: false,
phone: true
},
Comments: {
required: true
}
},
messages: {
Name: nameMsg,
email: {
defaultInvalid: emailMsg,
required: emailMsg,
email: emailMsgV
},
Comments: commentsMsg
},
success: function(error) {
setTimeout(function() { // Use a mini timeout to make sure the tooltip is rendred before hiding it
$('#contactForm').find('.valid').qtip('destroy');
}, 1);
},
submitHandler: function(form) {
$('#contactForm .autoclear').each(function() {
if (this.value === this.defaultValue) {
this.value = '';
}
});
form.submit();
},
errorPlacement: function(error, element) {
$(element).filter(':not(.valid)').qtip({
overwrite: false,
content: error,
position: {
my: 'left center',
at: 'right center'
},
show: {
event: false,
ready: true
},
hide: false
}).qtip('option', 'content.text', error);
} // closes errorPlacement
}) // closes validate()
}); // closes document.ready()
The problem is that since I have a defaultValue on this optional field it is getting validated too.
Can the custom method for phone be edited in such a way that it will ignore the defaultValue on the field if the field is left blank?
I tried surrounding the regex with an if/then, but that does not seem to work.
$.validator.addMethod('phone', function (value, element) {
if (value != element.defaultValue) {
return this.optional(element) || /^[01]?[- .]?\(?[2-9]\d{2}\)?[- .]?\d{3}[- .]?\d{4}$/.test(value);
}
}, 'This is not a valid number');
After thinking about how it works, I know this is the wrong approach... so now I'm lost.
Seems that you need to return something from the function you pass to addMethod:
$.validator.addMethod('phone', function (value, element) {
if (value != element.defaultValue) {
return this.optional(element) || /^[01]?[- .]?\(?[2-9]\d{2}\)?[- .]?\d{3}[- .]?\d{4}$/.test(value);
}
return true;
}, 'This is not a valid number');
Example: http://jsfiddle.net/L3S9e/
这篇关于如何在带有defaultValue的可选字段上使用jQuery Validator自定义方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
