One pain point in HTML5 validation is checkbox groups as you cannot simply
use the require
" attribute as it would require the inclusion of each
checkbox that is part of the group. This script fixes that by using a data
attribute -- data-checkbox-required
-- to indicate the requirement.
Adding the data-checkbox-required
attribute to one or more checkboxes
in a group would require at least one checkbox be chosen, but you can
specify lower and upper bounds by giving a value to the attribute. For
example:
<input type="checkbox" name="test[]" value="1"
data-checkbox-required="3"
>
Would require at least 3 checkboxes in the group be checked
<input type="checkbox" name="test[]" value="1"
data-checkbox-required="3-5"
>
Would require at least 3, but no more than 5 checkboxes in the group be checked.
<input type="checkbox" name="test[]" value="1"
data-checkbox-required="0-5"
>
Would require any number (including 0), up to 5 checkboxes in the group be checked.