Requirement Rules for Checkboxes

HTML checkboxes debuted as part of HTML 2.0 in 1995. Our ability to mark an individual checkbox as being required became part of the HTML5 spec that published in 2014. A decade later, we can still only make checkboxes required on a case-by-case basis. To overcome this limitation, I had created a jQuery plugin that allowed me to indicate that a user should choose a specific number of items from within a checkbox group. Yesterday I turned that plugin into a web component: form-required-checkboxes.

# Markup Assumptions

Before I tuck into the details, I’ll start by saying that the web component begins with the assumption that you are following best practices with respect to form markup:

• Your checkbox group should be in a fieldset with a legend
• All of the checkbox elements must have the same name (e.g., “foo[]”).

In other words, they should look something like this:

<fieldset>
  <legend>Group 1 label</legend>
	<ul>
		<li><label>
      <input type="checkbox" name="foo[]" value="1">
      First item
    </label></li>
		<li><label>
		  <input type="checkbox" name="foo[]" value="2">
		  Second item
	  </label></li>
		<!-- options continue -->
	</ul>
</fieldset>

To use the web component, you wrap the group in a form-required-checkboxes element and then include the JavaScript to initialize it.

<form-required-checkboxes>
  <fieldset>
    <legend>Group 1 label</legend>
	  <!-- etc. -->
  </fieldset>
</form-required-checkboxes>

<!-- at the end of your document -->
<script src="/js/web-components/form-required-checkboxes.js" async></script>

If you’re following right along, there’s an error waiting for you in the console — we need to set the requirement rules.

# The API

The form-required-checkboxes element requires at least one attribute to function, but using some of the others you can more fully customize the experience for users:

• required - Represents the range of required values. You can set this up in one of three ways depending on your needs:
  • Single number (e.g., 3) requires exactly that number of choices.
  • Range (e.g., 3-5) requires a minimum of the first number and a max of the second number be chosen.
  • Max (e.g., 0-3) requires a minimum of zero and a max of the second number to be chosen.
• notice (optional) - This is a string description that explains details of the required value in plan language. If you don’t supply one, the component will create one for you. This description will be added as a small element within the component (as a sibling to the fieldset).
• error (optional) - This is a string validation error you’d like to be shown when the validation criteria is not met. By default the component will use the notice text, but this gives you more flexibility.

# Demo

I put together a relatively simple demo of the web component over on GitHub:

# Grab It

You can view the entire project (and suggest enhancements) over on the component’s Github repo.