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

user_15311929 0
Viewed 208

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>
forms html
1 Answers

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.

user_149760220
Related