Custom checkbox form validation with (or without) Bootstrap

Your browser, as well as Boostrap, comes with built-in form validation, but when it comes to checkboxes, the validation options are limited. I created a form with three checkboxes, and the user is required to check at least one. Bootstrap only performs ‘required’ validation on checkboxes, which, in this case, won’t work, because only one – and any one – of the checkboxes is actually required. Here’s how to address this:

Some custom validation solutions trigger a Javascript alert, or a Bootstrap modal, but I wanted to use the browser’s built-in validation, if possible, so that a checkbox validation error would look like any other form element’s standard validation error.

The trick is to use the ‘setCustomValidity’ function, to set the validity for the first checkbox. For more information on setCustomValidity, take a look at the JavaScript constraint validation API.

First you need to get the state of the checkboxes. You need to give all of your checkboxes (or at least all of the ones in the validation set) the same name:

<form class="form-horizontal" id="checkboxform" data-toggle="validator" method="post" role="form">
    <div class="form-check">
        <input class="form-check-input" name="CheckBoxToValidate" type="checkbox" value="Checkbox1" id="Checkbox1" checked />
        <label class="form-check-label" for="Checkbox1">Option 1</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" name="CheckBoxToValidate" type="checkbox" value="Checkbox2" id="Checkbox2" checked />
        <label class="form-check-label" for="Checkbox2">Option 2</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" name="CheckBoxToValidate" type="checkbox" value="Checkbox3" id="Checkbox3" checked />
        <label class="form-check-label" for="Checkbox3">Option3</label>
    </div>
</form>

Then, you need a bit of Javascript, and to keep things a bit shorter, jQuery, to detect two things: 1) if the form has been submitted and, 2) if any of the checkboxes have changed. If either of these events are triggered, then check whether any checkboxes are checked, and then set the setCustomValidity attribute if necessary:

$("input[name='CheckBoxToValidate']").change (function() {
    $.each($("input[name='CheckBoxToValidate']"), function() {
            this.setCustomValidity('');
        });
        var checked = $("input[name='CheckBoxToValidate']:checked").length;
        if (checked == 0 ) {
            $("input[name='CheckBoxToValidate']")[0].setCustomValidity('Please select at least one checkbox.');
        }
    });
$("#checkboxform").submit( function() {
    var checked = $("input[name='CheckBoxToValidate']:checked").length;
    if (checked == 0) {
        $("input[name='CheckBoxToValidate']")[0].setCustomValidity('Please select at least one checkbox.');
        return false;
    } else {
        alert("At least one checkbox was checked!");
        return false;
    }
});

Why the ‘[0]’ in the following line (line 13, above)?

$("input[name='CheckBoxToValidate']")[0].setCustomValidity('Please select at least one checkbox.');

This ensures that the validation error message appears next to the first checkbox.

Why the two separate checks for the same condition at both the checkbox change and form submit? If you omit the function that monitors the checkboxes for changes, you will need to click twice on the submit button before the form will either submit or fail the validation check.

If no checkboxes are checked, you should get a native browser warning, that looks like any other validation error: