How to validate two sets of radio buttons in one form using 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>

Have one function to validate. In that function add your logic — selvakumar
– selvakumar, Commented Jun 2, 2017 at 8:11
Just trying to validate one of the sets of radio buttons by completely deleting the function validateDateTwo() doesnt't work, though. There must be an error in the function itself, I suppose? — lioness
– lioness, Commented Jun 2, 2017 at 8:16

Ankit Chaudhary · Accepted Answer · 2017-06-02 10:01:09Z

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>

Bernd Strehl · Accepted Answer · 2017-06-02 08:14:39Z

0

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.

answered Jun 2, 2017 at 8:14

Bernd Strehl

2,9404 gold badges26 silver badges45 bronze badges

8 Comments

lioness Over a year ago

Thanks for pointing out the security issues! In this case, though, I'm asked to write a client side only realisation as a project to learn JS.

Bernd Strehl Over a year ago

@lioness that's totally fine, but keep it in mind ;) This solution works on client side, though.

lioness Over a year ago

As for your code, I only changed the ID "#myform" after copying it but it doesn't seem to work? Instead, my other function to check if all regular text fields are filled in now doesn't work anymore, either.

Bernd Strehl Over a year ago

Have you wrapped the javascript code by a document ready handler? learn.jquery.com/using-jquery-core/document-ready

lioness Over a year ago

The document ready handler made my other functions work again indeed, but I still can't make your code work. I'm sorry, I'm really a complete beginner, and although I've gotten to know some basic JS during the last days, I've never used jQuery before (I did embed jQuery, though... Correctly, I hope). Is there a JS only solution by any chance?

|

prasanth · Accepted Answer · 2017-06-02 08:23:24Z

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>

Collectives™ on Stack Overflow

How to validate two sets of radio buttons in one form using JavaScript?

3 Answers 3

Comments

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related