Как настроить форму выбора, которая будет требоваться при нажатии определенной радиокнопки?

Question

Извините, если это глупый вопрос, но у меня есть форма с переключателем.В основном кнопки «да» и «нет».У меня также есть строка выбора, но я бы предпочел, чтобы она не отображалась как обязательная для отправки формы, если не выбран переключатель «да».Яваскрипт, который я использовал, охватывал все, кроме этого конкретного случая.Мне нужно, чтобы выбранный элемент стал обязательным при выборе переключателя «Да».Я разместил HTML-код, но я не уверен, нужен ли также JavaScript.Я отредактирую это, если так.

  <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";
    }
 }
}

 }

Answer 1

Если вы хотите скрыть / показать диапазон на основе значения переключателя и соответственно установить или удалить атрибут 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>

Answer 2

Во-первых, вам нужно будет выбрать пустое значение.В противном случае выбор всегда будет содержать значение и не будет пустым.

И, во-вторых, добавьте скрипт

 $(document).on('click', '[name=refee]', function(){
        $("#refT").attr("required", $(this).val()=='yes');  
    });

, который устанавливает атрибут 'required' для выбора