Make checkboxes required

Question

I already looked to similar questions but I still can't figure out how to fix it. On my webpage, I have some radio checkboxes which I would like to be required before going to the next question.

I have the following partial code:

 <p>
   Select the option that fits most to you<br><br>
   <label>
   <input type="radio" name="typesport" value="teamsport" > 
   I prefer a teamsport</label><br>
   <label>
   <input type="radio" name="typesport" value="individual"> 
   I prefer an individual sport</label><br>
 </p>
<a href="#question2" class="tm-bordered-btn">Next question</a>

Can someone help me with getting a javascript code, that actually works for all radio-boxes, where you could only go to the next question when 1 radio-box is selected?

Cheers, Max

Edit: What I've tried so far is the following: I added "required" to the label, so it looked like this:

 <label><input type="radio" name="typesport" value="teamsport" required> I prefer a teamsport</label><br>

I also added the ID to the button:

 <a href="#question2" class="tm-bordered-btn" id="checkBtn">Next question</a>

Furthermore, I used this JS script:

  $(document).ready(function () {
      $('#checkBtn').click(function() {
        checked = $("input[type=radio]:checked").length;

        if(!checked) {
          alert("You must check at least one radio.");
          return false;
        }

      });

  });

However, this works fine for only one question. When I add this to all the other questions, I still can go to the following question when I click on the button Next question, and that is not what I want.

Welcome to SO. Please understand SO is not a free coding service. You have to make some attempt to solve the problem yourself. If you can't get it working, post what you tried and we'll help you fix it. — palaѕн, Oct 18 '17 at 14:21

Mark Hillard · Answer 1 · 2017-10-18T14:39:08.820

1

HTML5 supports the required attribute for radio buttons. I did some searching and HTML5: How to use the "required" attribute with a "radio" input field has more detailed information about this attribute.

edited Oct 18 '17 at 14:39

answered Oct 18 '17 at 14:31

Mark Hillard

202
3
9

Master Yoda · Accepted Answer · 2017-10-18T14:45:07.940

Radio boxes are fairly simple in nature in that you should always have at least one option in a radio-group checked by default. Preferably a N/A or 'Please Select' option.

In which case you would want to validate against the 'Please Select' option instead:

//when user clicks <a> element
$(".next-button").click(function() {
  //group on radio button name and test if checked
  if ($("input[name='typesport']:checked").val() == 'select') {
    alert('Nothing is checked!');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  Select the option that fits most to you<br><br>
  <label><input type="radio" name="typesport" value="select" checked="true" > Please Select </label><br>
  <label><input type="radio" name="typesport" value="teamsport" > I prefer a teamsport</label><br>
  <label><input type="radio" name="typesport" value="individual"> I prefer an individual sport</label><br>
</p>
<a href="#question2" class="tm-bordered-btn next-button">Next question</a>

However

If you really want to validate that an option has been checked:

This should work:

//when user clicks <a> element
$(".next-button").click(function()
{
  //group on radio button name and test if checked
  if (!$("input[name='typesport']:checked").val()) {
   alert('Nothing is checked!');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
 Select the option that fits most to you<br><br>
 <label><input type="radio" name="typesport" value="teamsport" > I prefer a teamsport</label><br>
 <label><input type="radio" name="typesport" value="individual"> I prefer an individual sport</label><br>
 </p>
<a href="#question2" class="tm-bordered-btn next-button">Next question</a>

score 0 · Answer 3 · answered Oct 18 '17 at 14:30

You can set a radio button checked by default by using the checked attribute.

To check if it's checked or not, use this code :

  if ($('input[name=typesport]').attr('value') != undefined) {
    //execute code when it is checked
  } else {
    //execute code when it's not checked
  }

Make checkboxes required

3 Answers3