jQuery验证–选中复选框时检查输入值 [英] jQuery Validation – check input value when checkbox checked
问题描述
我有一个电话号码输入字段,其中包含SMS更新选项.我想检查一下,当"SMS"复选框被选中时,该号码是手机号码.我已经使用了正则表达式,并且正在验证,但是即使未选中此复选框也显示了"mobile require"错误.
I've got an input field for a phone number with the option for SMS updates. I want to check that when the SMS checkbox is checked that the number is a mobile number. I've got the regex working, and this is validating, but have got the 'mobile require' error showing even when then check box isn't checked.
$.validator.addMethod(
"regex",
function(value, element, regexp) {
if($('#receive_sms_updates').is(':checked')) {
var check = false;
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
}
}, "Mobile Required"
);
$("form#patient-detials").validate({
rules: {
'patient[person_attributes][phone_mobile]': {
maxlength: 10,
minlength: 10,
digits: true,
regex: "^04[0-9]{8}"
}
}
});
推荐答案
更新(来自下面的评论).
Update (from your comment below).
如果未输入 if
,则不会从自定义规则返回true,从技术上讲,这会导致 undefined
返回给调用方(这是 falsey 值).如下更新您的规则:
You aren't returning true from your custom rule if the if
isn't entered, which technically results in undefined
being returned to the caller (which is a falsey value). Update your rule as follows:
$.validator.addMethod("regex", function(value, element, regexp) {
if ($('#receive_sms_updates').is(':checked')) {
var check = false;
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
}
return true;
}, "Mobile Required");
将本部分保留下来,因为它可能对其他人有用:
我将更新您的验证呼叫和规则,如下所示:
I would update your validate call and rule as follows:
$.validator.addMethod("regex", function(value, element, regexp) {
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
}, "Mobile Required");
$("form#patient-detials").validate({
rules: {
'patient[person_attributes][phone_mobile]': {
maxlength: 10,
minlength: 10,
digits: true,
regex: "^04[0-9]{8}",
required: "#receive_sms_updates:checked"
}
}
});
如您所见, required
属性采用"dependency-expression",用于确定是否需要移动字段(基于 #receive_sms_updates
已选中).
As you can see, the required
property takes a "dependency-expression" which is used to determine whether or not the mobile field is required (based on whether or not #receive_sms_updates
is checked).
这里是一个示例: http://jsfiddle.net/andrewwhitaker/ED6cX/
要进一步走一小步,我建议从规则本身中删除"Mobile Required"方法(毕竟,您想要一个可重用的regex规则),并将其放置在 messages 验证调用上的code>属性.像这样:
To take it just one small step further, I would recommend removing the "Mobile Required" method from the rule itself (you want a re-usable regex rule after all), and place it on the messages
property on your validate call. Something like:
$.validator.addMethod("regex", function(value, element, regexp) {
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
});
$("form#patient-detials").validate({
rules: {
'patient[person_attributes][phone_mobile]': {
maxlength: 10,
minlength: 10,
digits: true,
regex: "^04[0-9]{8}",
required: "#receive_sms_updates:checked"
}
},
messages: {
'patient[person_attributes][phone_mobile]': {
required: "Mobile Required",
regex: "Please enter a valid mobile number"
}
}
});
示例: http://jsfiddle.net/andrewwhitaker/5BVCK/
通过这种方式,您不会以特定的形式限制验证规则(该验证规则足够通用,可以应用于其他字段).
This way you aren't restricting your validation rule (which is generic enough that it could apply to other fields) with a particular form.
这篇关于jQuery验证–选中复选框时检查输入值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!