How to make checkbox and radio buttons required on a HTML form

Question

I am working on a assignment for school where we are trying to create a form that requires the user to fill out all the information on the page. I've been using the required attribute in html for my other parts of the code and it's been successful but when I get to my radio and checkbox sections I can't seem to make it work. I either make all of the options required which is not what I want or I read on here that if you change the name=="" in the input tag to all the same names you only have to put the required attribute in the 1st input tag and that should work but when I tried that it just made the first checkbox and radio options the only required options on there

Any help would be much appreciated!

My code is below:

   <form>
      <fieldset>
    <legend>Select Your Favorite Types of Music:</legend>
      <div>
        <label for="check_1"><input type="checkbox" name="genre" id="check_1" required>Pop</label>
      </div>
      <div>
        <label for="check_2"><input type="checkbox" name="genre" id="check_2">Classical</label>
      </div>
      <div>
        <label for="check_3"><input type="checkbox" name="genre" id="check_3">Rock</label>
      </div>
      <div>
        <label for="check_4"><input type="checkbox" name="genre" id="check_4">Folk</label>
      </div>
      <div>
        <label for="check_5"><input type="checkbox" name="genre" id="check_5">Rap</label>
      </div>
      <div>
        <label for="check_6"><input type="checkbox" name="genre" id="check_6">Other</label>
      </div>
  </fieldset>  
<br>
  <fieldset>
    <legend>Select how often you purchase:</legend>
      <div>
        <label for="radio_1"><input type="radio" name="often" id="radio_1" required>Weekley</label>
      </div>
      <div>
        <label for="radio_2"><input type="radio" name="often" id="radio_2">A few CDs each year</label>
      </div>
      <div>
        <label for="radio_3"><input type="radio" name="often" id="radio_3">Monthly</label>
      </div>
      <div>
        <label for="radio_4"><input type="radio" name="often" id="radio_4">Never Purchase</label>
      </div>
  </fieldset>
</form>

Dharman · Accepted Answer · 2021-10-21 02:37:52Z

0

You need to wrap your code in a form tag, then use javascript to require a response.

in your HTML file:

<script>

  function checkForm(form)
  {
    ...
    if(!form.terms.checked) {
      alert("Please indicate that you accept the Terms and Conditions");
      form.terms.focus();
      return false;
    }
    return true;
  }

</script>

<form ... onsubmit="return checkForm(this);">
...
<p><input type="checkbox" name="terms"> I accept the <u>Terms and Conditions</u></p>
<p><input type="submit"></p>
</form>

This is just an example because I don't have the submit buttons for your check boxes.

edited Oct 21, 2021 at 2:37

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Oct 21, 2021 at 2:32

Natalie Smyth

367 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to make checkbox and radio buttons required on a HTML form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related