FormValidation v0.8.1 is released, supports Bootstrap 4 alpha 3

Playing with Chosen


Use with the Chosen plugin.

You should look at the basic principles when integrating FormValidation with other plugins

The Favorite color option requires to choose 2-4 colors you like most.

<!-- Include chosen CSS, JS -->
<link rel="stylesheet" href="//" />
<script src="//"></script>

<style type="text/css">
.chosen-choices {
    border: 1px solid #ccc;
    border-radius: 4px;
    min-height: 34px;
    padding: 6px 12px;
.chosenContainer .form-control-feedback {
    /* Adjust feedback icon position */
    right: -15px;
.chosenContainer .form-control {
    height: inherit; 
    padding: 0px;

<form id="chosenForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Favorite color</label>
        <div class="col-xs-8 chosenContainer">
            <select class="form-control chosen-select" name="colors" multiple data-placeholder="Choose 2-4 colors" style="width: 100%;">
                <option value="black">Black</option>
                <option value="blue">Blue</option>
                <option value="green">Green</option>
                <option value="orange">Orange</option>
                <option value="red">Red</option>
                <option value="yellow">Yellow</option>
                <option value="white">White</option>
    <div class="form-group">
        <div class="col-xs-5 col-xs-offset-3">
            <button type="submit" class="btn btn-default">Validate</button>

$(document).ready(function() {
                width: '100%',
                inherit_select_classes: true
            // Revalidate the color when it is changed
            .change(function(e) {
                $('#chosenForm').formValidation('revalidateField', 'colors');
            framework: 'bootstrap',
            excluded: ':disabled',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            fields: {
                colors: {
                    validators: {
                        callback: {
                            message: 'Please choose 2-4 color you like most',
                            callback: function(value, validator, $field) {
                                // Get the selected options
                                var options = validator.getFieldElements('colors').val();
                                return (options != null && options.length >= 2 && options.length <= 4);