v0.5.3 is released on 2014.11.05!

choice validator

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.

When setting options via HTML attributes, remember to enable the validator by setting data-bv-choice="true".

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:

Programming Languages

.Net

Java

C/C++

PHP

Perl

Ruby

Python

Javascript

Editors

<form id="interviewForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-3 control-label">Programming Languages</label>
        <div class="col-sm-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-sm-3 control-label">Editors</label>
        <div class="col-sm-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'
                    }
                }
            }
        }
    });
});

<form id="interviewForm" class="form-horizontal"
    data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
    data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
    data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">

    <!-- You only need to set the validator options for one of radio or checkbox elements -->
    <div class="form-group">
        <label class="col-sm-3 control-label">Programming Languages</label>
        <div class="col-sm-4">
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="languages[]" value="net"
                        data-bv-choice="true"
                        data-bv-choice-min="2"
                        data-bv-choice-max="4"
                        data-bv-choice-message="Please choose 2 - 4 programming languages you are good at" /> .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-sm-3 control-label">Editors</label>
        <div class="col-sm-4">
            <select class="form-control" name="editors[]" multiple="multiple" style="height: 200px;"
                data-bv-choice="true"
                data-bv-choice-min="2"
                data-bv-choice-max="3"
                data-bv-choice-message="Please choose 2 - 3 editors you use most">

                <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>

<script>
$(document).ready(function() {
    $('#interviewForm').bootstrapValidator();
});
</script>