如何验证与单选按钮相关的字段? [英] How to validate fields tied to radio buttons?
问题描述
我有一个联系表，要求提供姓名，联系方式(电子邮件或电话)，电子邮件或电话文本字段(取决于单击的单选按钮)和说明.我正在使用jQuery的Validation插件进行验证.当单击电子邮件单选按钮时，将显示电子邮件字段，而在电话字段中单击相同.我的问题是，当单击电子邮件单选按钮时，代码将如何验证电子邮件文本字段，而单击电话单选按钮时，代码将如何验证电话文本字段.应该是其中之一，但不是两个都需要.如果有帮助，当我单击电子邮件单选按钮时，将显示电子邮件文本字段，而电话文本字段消失，反之亦然.
I have a contact form which requires a name, method of contact (email or telephone), an email or telephone text-field(depending on which radio button is clicked) and a description. I'm validating with jQuery's Validation plug in. The email field appears when one clicks on the email radio button and the same for the telephone field. My question is how would the code look to validate the email text-field when the email radio button is clicked and validate the telephone text-field when the telephone radio button is clicked. One of them should be required but not both. If it helps, when I click on the email radio button the email text-field appears and the telephone text-field disappears and vice-versa.
HTML
<div class="control-group">
<label class="control-label" for="contact_name">Name</label>
<div class="controls">
<input id="contact_name" name="contact[name]" size="30" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="How_would_you_like_to_be_contacted_">How would you like to be contacted?</label>
<div class="controls">
<label class="radio">
<input id="contact_type_email" name="contact_type" type="radio" value="email" />
<label for="Email">Email</label>
</label>
<label class="radio">
<input id="contact_type_telephone" name="contact_type" type="radio" value="telephone" />
<label for="Telephone">Telephone</label>
</label>
</div>
</div>
<div class="control-group" id="email">
<label class="control-label" for="contact_email">Email</label>
<div class="controls">
<input id="contact_email" name="contact[email]" size="30" type="text" />
</div>
</div>
<div class="control-group" id="telephone">
<label class="control-label" for="contact_telephone">Telephone</label>
<div class="controls">
<input id="contact_telephone" name="contact[telephone]" placeholder="###-###-####" size="30" type="text" />
</div>
</div>
jQuery
$(document).ready(function() {
$('#email').hide();
$('#telephone').hide();
var email = false;
var telephone = false;
$('#contact_type_email').click(function() {
$('#email').show();
$('#telephone').hide();
email = true;
telephone = false;
});
$('#contact_type_telephone').click(function() {
$('#telephone').show();
$('#email').hide();
telephone = true;
email = false;
});
jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
phone_number = phone_number.replace(/\s+/g, "");
return this.optional(element) ||
phone_number.match(/^[2-9]\d{2}-[2-9]\d{2}-\d{4}$/);
}, "Please specify a valid phone number");
$('#new_contact').validate({
ignore: ":hidden",
rules: {
'contact[name]': {
required: true
},
'contact[email]': {
required: true,
email: true
},
'contact[telephone]': {
required: true,
phoneUS: true
},
'contact[description]': {
required: true
},
contact_type: {
required: true
}
},
messages: {
'contact[name]': {
required: "Please provide a name."
},
'contact[telephone]': {
required: "Please provide a valid telephone number."
},
'contact[description]': {
required: "Please provide a description of the work you would like done."
}
},
errorPlacement: function(error, element) {
error.appendTo("#error");
}
});
});
我尝试使用vars email和telephone做一些事情，但是不确定是否需要它们.
I tried doing something with the vars email and telephone but not sure if they're needed.
推荐答案
根据文档，您将在rules 下使用 depends选项.
rules: {
telephone_field: {
required: {
depends: function(element) {
return $("#telephone_checkbox").prop("checked");
}
}
}
}
下面的演示非常接近我不希望看到您的特定代码的情况.这只是有关如何在场景中正确使用depends的演示.也没有包含用于显示/隐藏字段的代码，因为大概您已经在这方面有了一些有效的代码.
The following demo is as close as I'm willing to get without seeing your specific code. It's merely a demonstration about how to properly use depends with your scenario. There is also no code included to make fields show/hide because, presumably, you already have some working code in that regard.
在通过radio按钮进行选择之前，required都不是.然后，仅将与之对应的已选中" radio按钮的字段设置为required. (由于depends，required规则与radio按钮一起切换.)
Nothing is required until a choice is made via the radio buttons. Then only the field corresponding to it's "checked" radio button is made required. (The required rule is toggled along with the radio buttons thanks to depends.)
工作示例: http://jsfiddle.net/ZqHMq/
Working Demo: http://jsfiddle.net/ZqHMq/
jQuery :
$(document).ready(function () {
$('#myform').validate({
rules: {
telephonefield: {
required: {
depends: function (element) {
return $("#telephone").prop("checked");
}
}
},
emailfield: {
required: {
depends: function (element) {
return $("#email").prop("checked");
}
}
}
}
});
});
HTML :
<form id="myform">
telephone: <input type="text" name="telephonefield" />
<br/>
email: <input type="text" name="emailfield" />
<br/>
telephone: <input type="radio" name="contactradio" id="telephone" />
<br/>
email: <input type="radio" name="contactradio" id="email" />
<br />
<input type="submit" />
</form>
这是使用您的显示/隐藏代码进行的粗略的概念验证"演示: http://jsfiddle.净/7622M/
This is a crude "proof-of-concept" demonstration using your show/hide code: http://jsfiddle.net/7622M/
这篇关于如何验证与单选按钮相关的字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
