BootstrapValidator

Validators / choice

Check if the number of checked boxes are less or more than a given number.

Options

The validator also supports the select element if the multiple="multiple" attribute is set.

Option HTML attribute Type Description
max data-bv-choice-max Number The maximum number of check boxes required to be checked.
It's a dynamic option
message data-bv-choice-message String The error message
min data-bv-choice-min Number The minimum number of check boxes required to be checked.
It's a dynamic option

At least one of min and max option is required.

Naming convention

In order to get the correct submit data in the server side, you should pay attention on setting the name attribute of checkbox/select elements.

Server side name attribute Example
PHP name[] 
<input type="checkbox" name="languages[]" />
<select name="editors[]" multiple="multiple"></select>
Spring framework name 
<input type="checkbox" name="languages" />
<select name="editors" multiple="multiple"></select>

Example

The following form asks a developer to choose 2-4 programming languages which he/she is good at:

<form id="interviewForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-lg-3 control-label">Programming Languages</label>
        <div class="col-lg-4">
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="languages[]" value="net" /> .Net
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="languages[]" value="java" /> Java
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="languages[]" value="c" /> C/C++
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="languages[]" value="php" /> PHP
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="languages[]" value="perl" /> Perl
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="languages[]" value="ruby" /> Ruby
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="languages[]" value="python" /> Python
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="languages" value="javascript" /> Javascript
                </label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-lg-3 control-label">Editors</label>
        <div class="col-lg-4">
            <select class="form-control" name="editors[]" multiple="multiple" style="height: 200px;">
                <option value="" disabled>Choose 2 - 3 editors</option>
                <option value="atom">Atom</option>
                <option value="eclipse">Eclipse</option>
                <option value="netbeen">NetBean</option>
                <option value="nodepadplusplus">Nodepad++</option>
                <option value="phpstorm">PHP Storm</option>
                <option value="sublime">Sublime</option>
                <option value="webstorm">Web Storm</option>
            </select>
        </div>
    </div>
</form>
$(document).ready(function() {
    $('#interviewForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            'languages[]': {
                validators: {
                    choice: {
                        min: 2,
                        max: 4,
                        message: 'Please choose 2 - 4 programming languages you are good at'
                    }
                }
            },
            'editors[]': {
                validators: {
                    choice: {
                        min: 2,
                        max: 3,
                        message: 'Please choose 2 - 3 editors you use most'
                    }
                }
            }
        }
    });
});