Html5 form validation checkboxes

Question

I want to make only one checkbox of a group of checkboxes mandatory for the user to check without using JavaScript. I have the following (quite simple) code:

<input type="checkbox" class="checkbox_condition" name="checkboxGroupName" id="first" required>
<input type="checkbox" class="checkbox_condition" name="checkboxGroupName" id="first" required>

I want to compel visitor to select one checkbox from the group. How can I do that without JavaScript? I would appreciate any recommendations.

A little more code for context may help – Andy Joiner Jul 29 '15 at 20:01 — Andy Joiner, Jul 29 '15 at 20:01

score 1 · Accepted Answer · answered Jul 29 '15 at 19:39

Switch your checkbox to radio - radio buttons have the built in function you are looking for, in your css you can make the radio button look like a check box. see my fiddle https://jsfiddle.net/pcvwwjoe/2/

<input type="radio" class="checkbox_condition" name="checkboxGroupName" id="first" required>
  <input type="radio" class="checkbox_condition" name="checkboxGroupName" id="first">

also, notice that since both radio buttons have the same name, you only need to use required once since they are all grouped together.

Html5 form validation checkboxes

1 Answers1