[英]How to set a select form to be required when a particular radio button is clicked?
I'm sorry if this is a dumb question but, I have a form with a radio button. 如果这是一个愚蠢的问题,很抱歉,但是,我有一个带有单选按钮的表格。 Basically a yes and a no button.
基本上,是和否按钮。 I have a select bar as well, but I would prefer it not be seen as required to submit the form unless the radio button 'yes' is selected.
我也有一个选择栏,但是我希望不要将其视为提交表单的必要条件,除非选中了单选按钮“是”。 The javascript I used covered everything, save for this particular instance.
我使用的JavaScript涵盖了所有内容,但不包括此特定实例。 I need to make the select item become required when the yes radio button is selected.
当选择是单选按钮时,我需要使选择项成为必需项。 I posted the html code, but I'm not sure if the javascript is also needed.
我发布了html代码,但不确定是否还需要javascript。 I'll edit it, if so.
如果可以的话,我将对其进行编辑。
<label for="yes"><input type="radio" id="yes" name="refee" value="yes" class="radio">Yes</label>
<label for="no"><input type="radio" id="no" name="refee" value="no" class="radio">No</label>
<<label for="Age range">Age range: </label>
<select id="refT">
<option selected="selected">20-30</option>
<option>30-40</option>
<option>40-50</option>
<option>60+</option>
</select>
<br><input type="submit" value="Submit"><br>
<br><input type="reset" value="Reset"><br>
</form>
window.onload = initForm;
function initForm() {
document.forms[0].onsubmit = validForm;
document.getElementById("sunroof").onclick = doorSet;
}
function validForm() {
var allGood = true;
var allTags = document.forms[0].getElementsByTagName("*");
for (var i=0; i<allTags.length; i++) {
if (!validTag(allTags[i])) {
allGood = false;
}
}
return allGood;
function validTag(thisTag) {
var outClass = "";
var allClasses = thisTag.className.split(" ");
for (var j=0; j<allClasses.length; j++) {
outClass += validBasedOnClass(allClasses[j]) + " ";
}
thisTag.className = outClass;
if (outClass.indexOf("invalid") > -1) {
invalidLabel(thisTag.parentNode);
thisTag.focus();
if (thisTag.nodeName == "INPUT") {
thisTag.select();
}
return false;
}
return true;
function validBasedOnClass(thisClass) {
var classBack = "";
switch(thisClass) {
case "":
case "invalid":
break;
case "reqd":
if (allGood && thisTag.value == "") {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "radio":
if (allGood && !radioPicked(thisTag.name)) {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "isNum":
if (allGood && !isNum(thisTag.value)) {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "isZip":
if (allGood && !isZip(thisTag.value)) {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "email":
if (allGood && !validEmail(thisTag.value)) {
classBack = "invalid ";
}
classBack += thisClass;
break;
default:
if (allGood && !crossCheck(thisTag,thisClass)) {
classBack = "invalid ";
}
classBack += thisClass;
}
return classBack;
function crossCheck(inTag,otherFieldID) {
if (!document.getElementById(otherFieldID)) {
return false;
}
return (inTag.value == document.getElementById(otherFieldID).value);
}
function radioPicked(radioName) {
var radioSet = document.forms[0][radioName];
if (radioSet) {
for (k=0; k<radioSet.length; k++) {
if (radioSet[k].checked) {
return true;
}
}
}
return false;
}
function isNum(passedVal) {
if (passedVal == "") {
return false;
}
for (var k=0; k<passedVal.length; k++) {
if (passedVal.charAt(k) < "0") {
return false;
}
if (passedVal.charAt(k) > "9") {
return false;
}
}
return true;
}
function isZip(inZip) {
if (inZip == "") {
return true;
}
return (isNum(inZip));
}
function validEmail(email) {
var invalidChars = " /:,;";
if (email == "") {
return false;
}
for (var k=0; k<invalidChars.length; k++) {
var badChar = invalidChars.charAt(k);
if (email.indexOf(badChar) > -1) {
return false;
}
}
var atPos = email.indexOf("@",1);
if (atPos == -1) {
return false;
}
if (email.indexOf("@",atPos+1) != -1) {
return false;
}
var periodPos = email.indexOf(".",atPos);
if (periodPos == -1) {
return false;
}
if (periodPos+3 > email.length) {
return false;
}
return true;
}
}
}
function invalidLabel(parentTag) {
if (parentTag.nodeName == "LABEL") {
parentTag.className += " invalid";
}
}
}
}
If you want to hide/show the range based on the radio button value and set or remove the required
attribute accordingly, you can try the following way: 如果要基于单选按钮值隐藏/显示范围并相应地设置或删除
required
属性,可以尝试以下方法:
document.querySelectorAll('[name=refee]').forEach(function(rad){ rad.addEventListener('change', function(){ var rangeStyle = document.getElementById('range').style; if(this.value == 'yes'){ rangeStyle.display='inline-block'; document.getElementById('refT').required = true; } else{ rangeStyle.display='none'; document.getElementById('refT').removeAttribute('required');; } }); });
#range{ display: none; }
<form> <label for="yes"><input type="radio" id="yes" name="refee" value="yes" class="radio">Yes</label> <label for="no"><input type="radio" id="no" name="refee" value="no" class="radio">No</label> <div id="range"> <label for="Age range">Age range: </label> <select id="refT"> <option value="">Select</option> <option>20-30</option> <option>30-40</option> <option>40-50</option> <option>60+</option> </select> </div> <br><input type="submit" value="Submit"><br> <br><input type="reset" value="Reset"><br> </form>
First, you will need option to select with empty value. 首先,您需要选择带有空值的选项。 Otherwise the select always will contents value and will not be empty.
否则,选择始终将包含内容值,并且不会为空。
And second, add script 其次,添加脚本
$(document).on('click', '[name=refee]', function(){
$("#refT").attr("required", $(this).val()=='yes');
});
that set 'required' attribute to select 设置“必需”属性以选择
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.