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

Playing with Bootstrap Combobox

Examples

In this example, you will see how to integrate FormValidation with the Bootstrap Combobox plugin.

You should look at the basic principles when integrating FormValidation with other plugins
$
<!-- Include Bootstrap Combobox -->
<link rel="stylesheet" href="/vendor/bootstrap-combobox/css/bootstrap-combobox.css">

<script src="/vendor/bootstrap-combobox/js/bootstrap-combobox.js"></script>

<style type="text/css">
/* Adjust feedback icon position */
#productForm .selectContainer .form-control-feedback,
#productForm .inputGroupContainer .form-control-feedback {
    right: -15px;
}
</style>

<form id="productForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Product name</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="name" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Description</label>
        <div class="col-xs-8">
            <textarea name="description" class="form-control" rows="5"></textarea>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Price</label>
        <div class="col-xs-3 inputGroupContainer">
            <div class="input-group">
                <input type="text" class="form-control" name="price" />
                <span class="input-group-addon">$</span>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Size</label>
        <div class="col-xs-5 selectContainer">
            <select class="form-control" name="size">
                <option value="">Choose a size</option>
                <option value="s">Small (S)</option>
                <option value="m">Medium (M)</option>
                <option value="l">Large (L)</option>
                <option value="xl">Extra large (XL)</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Color</label>
        <div class="col-xs-5 selectContainer">
            <select class="form-control" name="color">
                <option value="">Choose a color</option>
                <option value="black">Black</option>
                <option value="green">Green</option>
                <option value="red">Red</option>
                <option value="yellow">Yellow</option>
                <option value="white">White</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-5 col-xs-offset-3">
            <button type="submit" class="btn btn-default">Add new shirt</button>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#productForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            excluded: ':disabled',
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: 'The name is required'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: 'The name must be more than 6 and less than 30 characters long'
                        }
                    }
                },
                description: {
                    validators: {
                        notEmpty: {
                            message: 'The description is required'
                        },
                        stringLength: {
                            min: 50,
                            max: 1000,
                            message: 'The description must be more than 50 and less than 1000 characters'
                        }
                    }
                },
                price: {
                    validators: {
                        notEmpty: {
                            message: 'The price is required'
                        },
                        numeric: {
                            message: 'The price must be a number'
                        }
                    }
                },
                size: {
                    validators: {
                        notEmpty: {
                            message: 'The size is required'
                        }
                    }
                },
                color: {
                    validators: {
                        notEmpty: {
                            message: 'The color is required'
                        }
                    }
                }
            }
        })
        /* Using Combobox for color and size select elements */
        .find('[name="color"], [name="size"]')
            .combobox()
            .end()
});
</script>