如何使用JavaScript以一种形式验证两组单选按钮？

Question

I have two sets of radio buttons in one form. You're not supposed to be able to send the form if you haven't checked one radio button per set. If possible, I would like a solution with JS only (no jQuery). I found a helpful function in an older question on here and tried to adapt it to my case, but I obviously failed. Where's my mistake?

<form>

<input type="radio" name="date_1" id="dat-1_27-10" value="2017-10-27" <?php echo $checked1 ;?> />
<input type="radio" name="date_1" id="dat-1_28-10" value="2017-10-28" <?php echo $checked2 ;?> />
<input type="radio" name="date_1" id="dat-1_03-11" value="2017-11-03" <?php echo $checked3 ;?> />
<input type="radio" name="date_1" id="dat-1_04-11" value="2017-11-04" <?php echo $checked4 ;?> />

<input type="radio" name="date_2" id="dat-2_27-10" value="2017-10-27" <?php echo $checked5 ;?> />
<input type="radio" name="date_2" id="dat-2_28-10" value="2017-10-28" <?php echo $checked6 ;?> />
<input type="radio" name="date_2" id="dat-2_03-11" value="2017-11-03" <?php echo $checked7 ;?> />
<input type="radio" name="date_2" id="dat-2_04-11" value="2017-11-04" <?php echo $checked8 ;?> />

<input type="submit" name="send" value="send" id="submit" onclick='return validateDateOne(); return validateDateTwo();'/>

</form>

<script>

function validateDateOne() {
      if (!$("input[name='date_1']:checked").val()) {
          alert('Please choose your favourite date');
          return false;
      }
      else {}
}

function validateDateTwo() {
      if (!$("input[name='date_2']:checked").val()) {
           alert('Please choose a second date');
           return false;
      }
      else {}
}

</script>

Answer 1

Call the function validateDateTwo() with retrun statement inside the else condition of function validateDateOne() instead of calling it in onclick.

For Pure JS solution,i used querySelector instead of $ .

 function validateDateOne() { if (!document.body.querySelector("input[name='date_1']:checked")) { alert('Please choose your favourite date'); return false; } else { return validateDateTwo(); } } function validateDateTwo() { if (!document.body.querySelector("input[name='date_2']:checked")) { alert('Please choose a second date'); return false; } else {} } 

 <form> <input type="radio" name="date_1" id="dat-1_27-10" value="2017-10-27" />2017-10-27 <input type="radio" name="date_1" id="dat-1_28-10" value="2017-10-28" />2017-10-28 <input type="radio" name="date_1" id="dat-1_03-11" value="2017-10-28" />2017-10-28 <input type="radio" name="date_1" id="dat-1_04-11" value="2017-11-04" />2017-11-04 <br/> <input type="radio" name="date_2" id="dat-2_27-10" value="2017-10-27" />2017-10-27 <input type="radio" name="date_2" id="dat-2_28-10" value="2017-10-28" />2017-10-28 <input type="radio" name="date_2" id="dat-2_03-11" value="2017-11-03" />2017-10-28 <input type="radio" name="date_2" id="dat-2_04-11" value="2017-11-04" />2017-11-04 <input type="submit" name="send" value="send" id="submit" onclick='return validateDateOne();'/> </form> 

Answer 2

Group your checks together in one function. Also I would recommend to attach a submit handler with jQuery.

Here is a working jsfiddle

<input type="submit" name="send" value="send" id="submit" />


$('#myform').submit(function(e){
        e.preventDefault();
      if (!$("input[name='date_1']:checked").val()) {
          alert('Please choose your favourite date');
          return;
      }
        if (!$("input[name='date_2']:checked").val()) {
           alert('Please choose a second date');
           return;
      }
      alert("submit")
});

Note that the Jquery submit handler is wrapped in a onDomReady Handler.

Also: Client Side Validation is NEVER safe. To be sure with the input data, validate it on the backend, too.

Answer 3

Try with validate the checked box length and add the validation function in onsubmit of the form instead of button click .no need a two function only single function is enough

 function validateDate() { if (!$("input[name='date_1']:checked").length) //validate first one { console.log('select any one in first part'); return false; } if (!$("input[name='date_2']:checked").length) //validate second one { console.log('select any one in second part') return false; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form onsubmit="return validateDate()"> <!--only do with single function--> <input type="radio" name="date_1" id="dat-1_27-10" value="2017-10-27" <?php echo $checked1 ;?> /> <input type="radio" name="date_1" id="dat-1_28-10" value="2017-10-28" <?php echo $checked2 ;?> /> <input type="radio" name="date_1" id="dat-1_03-11" value="2017-11-03" <?php echo $checked3 ;?> /> <input type="radio" name="date_1" id="dat-1_04-11" value="2017-11-04" <?php echo $checked4 ;?> /> <input type="radio" name="date_2" id="dat-2_27-10" value="2017-10-27" <?php echo $checked5 ;?> /> <input type="radio" name="date_2" id="dat-2_28-10" value="2017-10-28" <?php echo $checked6 ;?> /> <input type="radio" name="date_2" id="dat-2_03-11" value="2017-11-03" <?php echo $checked7 ;?> /> <input type="radio" name="date_2" id="dat-2_04-11" value="2017-11-04" <?php echo $checked8 ;?> /> <input type="submit" name="send" value="send" id="submit" /> </form>