Validators / choice

Edit on Github

Check if the number of checked boxes are less or more than a given number. It also supports the select element if the multiple="multiple" attribute is set.

Option Equivalent HTML attribute Type Description
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
max data-bv-choice-max Number The maximum number of check boxes required to be checked. At least one of min and max is required

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>
<script>
$(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'
                    }
                }
            }
        }
    });
});
</script>

Comments

If you want to report a bug, please submit the issue on Github. Do NOT post the issue here.

For a general question or feedback, use the form below.