Question

I have a list of checkboxes with the same name attribute, and I need to validate that at least one of them has been selected.

But when I use the html5 attribute "required" on all of them, the browser (chrome & ff) doesn’t allow me to submit the form unless all of them are checked.

sample code:

<label for="a-0">a-0</label>
<input type="checkbox" name="q-8" id="a-0" required />
<label for="a-1">a-1</label>
<input type="checkbox" name="q-8" id="a-1" required />
<label for="a-2">a-2</label>
<input type="checkbox" name="q-8" id="a-2" required />

When using the same with radio inputs, the form works as expected (if one of the options is selected the form validates)

According to Joe Hopfgartner (who claims to quote the html5 specs), the supposed behaviour is:

For checkboxes, the required attribute shall only be satisfied when one or more of the checkboxes with that name in that form are checked.

For radio buttons, the required attribute shall only be satisfied when exactly one of the radio buttons in that radio group is checked.

am i doing something wrong, or is this a browser bug (on both chrome & ff) ??

Answer 1

Sorry, now I’ve read what you expected better, so I’m updating the answer.

Based on the HTML5 Specs from W3C, nothing is wrong. I created this JSFiddle test and it’s behaving correctly based on the specs (for those browsers based on the specs, like Chrome 11 and Firefox 4):

<form>
    <input type="checkbox" name="q" id="a-0" required autofocus>
    <label for="a-0">a-1</label>
    <br>

    <input type="checkbox" name="q" id="a-1" required>
    <label for="a-1">a-2</label>
    <br>

    <input type="checkbox" name="q" id="a-2" required>
    <label for="a-2">a-3</label>
    <br>

    <input type="submit">
</form>

I agree that it isn’t very usable (in fact many people have complained about it in the W3C’s mailing lists).

But browsers are just following the standard’s recommendations, which is correct. The standard is a little misleading, but we can’t do anything about it in practice. You can always use JavaScript for form validation, though, like some great jQuery validation plugin.

Another approach would be choosing a polyfill that can make (almost) all browsers interpret form validation rightly.