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

by

Unfortunately HTML5 does not provide an out-of-the-box way to do that.

However, using jQuery, you can easily control if a checkbox group has at least one checked element.

Consider the following DOM snippet:

<div class="checkbox-group required">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
</div>

You can use this expression:

$('div.checkbox-group.required :checkbox:checked').length > 0

which returns true if at least one element is checked.
Based on that, you can implement your validation check.

More Related Contents:

  1. My form’s validate() is not working
  2. POST unchecked HTML checkboxes
  3. Is it a good practice to use an empty URL for a HTML form’s action attribute? (action=””)
  4. How to read if a checkbox is checked in PHP?
  5. Get checkbox value in jQuery
  6. Submit an HTML form with empty checkboxes
  7. Tri-state Check box in HTML?
  8. changing the language of error message in required field in html5 contact form
  9. HTML5 validation when the input type is not “submit”
  10. How to Call a JS function using OnClick event [duplicate]
  11. Enable/Disable submit button if checkbox is checked/unchecked?
  12. Best JavaScript solution for client-side form validation and interaction? [closed]
  13. HTML/JavaScript: Simple form validation on submit
  14. calculate the number of html checkbox checked using jquery
  15. Can you require two form fields to match with HTML5?
  16. What is &amp used for
  17. How to show setCustomValidity message/tooltip without submit event
  18. HTML5: Slider with two inputs possible?
  19. How can I conditionally require form inputs with AngularJS?
  20. HTML slider with two inputs possible?
  21. Disable validation of HTML form elements
  22. HTML5 validation before ajax submit
  23. How to set custom validation messages for HTML forms?
  24. Trigger standard HTML validation (form) without using submit button? [duplicate]
  25. How do I style the HTML form validation error messages with CSS?
  26. Can you require two form fields to match with HTML?
  27. Angular form validation ng-disabled not working
  28. POST arrays not showing unchecked Checkboxes
  29. Add span inside form’s placeholder
  30. Custom Checkbox

Leave a Comment