Using the HTML5 “required” attribute for a group of checkboxes?

When using the newer browsers that support HTML5 (FireFox 4 for example);
and a form field has the attribute required='required';
and the form field is empty/blank;
and the submit button is clicked;
the browsers detects that the “required” field is empty and does not submit the form;
instead browser shows a hint asking the user to type text into the field.

Now, instead of a single text field, I have a group of checkboxes, out of which at least one should be checked/selected by the user.

How can I use the HTML5 required attribute on this group of checkboxes?
(Since only one of the checkboxes needs to be checked, I can’t put the required attribute on each and every checkbox)

ps. I am using simple_form, if that matters.


UPDATE

Could the HTML 5 multiple attribute be helpful here? Has anyone use it before for doing something similar to my question?

UPDATE

It appears that this feature is not supported by the HTML5 spec: ISSUE-111: What does input.@required mean for @type = checkbox?

(Issue status: Issue has been marked closed without prejudice.)
And here is the explanation.

UPDATE 2

It’s an old question, but wanted to clarify that the original intent of the question was to be able to do the above without using Javascript – i.e. using a HTML5 way of doing it. In retrospect, I should’ve made the “without Javascript” more obvious.

14 Answers
14

Leave a Comment