BootstrapValidator

Examples / Advance

Advance

Showing required icon for the mandatory fields

As you know, the BootstrapValidator provides three feedback icons which are shown based on the status of field:

$(document).ready(function() {
    $(form).bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        }
        ...
    });
});
Setting Description
feedbackIcons.valid Shown when the field is valid
feedbackIcons.invalid Shown when the field is invalid
feedbackIcons.validating Shown when the field is being validated

In this example, you will see how to show a required icons if the field is mandatory.

The setting will look like as following:

$(document).ready(function() {
    // Use Glyphicons icons
    $(form).bootstrapValidator({
        feedbackIcons: {
            required: 'glyphicon glyphicon-asterisk',
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        }
        ...
    });

    // Use FontAwesome icons
    $(form).bootstrapValidator({
        feedbackIcons: {
            required: 'fa fa-asterisk',
            valid: 'fa fa-check',
            invalid: 'fa fa-times',
            validating: 'fa fa-refresh'
        }
        ...
    });
});

The implementation uses:

  • getOptions() method to get the required icon option
  • Show the required icons by triggering the init.field.bv event which is called after the field is initialized by the plugin
  • Hide the required icons by triggering the status.field.bv event which is called after the field changes its status
$ 
<form id="productForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-md-3 control-label">Name</label>
        <div class="col-md-5">
            <input type="text" class="form-control" name="name" />
        </div>
    </div>

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

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

    <div class="form-group">
        <label class="col-md-3 control-label">Quantity</label>
        <div class="col-md-3">
            <input type="text" class="form-control" name="quantity" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-5 col-md-offset-3">
            <button type="submit" class="btn btn-default">Add product</button>
        </div>
    </div>
</form>
$(document).ready(function() {
    $('#productForm')
        // IMPORTANT: You must declare .on('init.field.bv')
        // before calling .bootstrapValidator(options)
        .on('init.field.bv', function(e, data) {
            // data.bv      --> The BootstrapValidator instance
            // data.field   --> The field name
            // data.element --> The field element

            var $parent    = data.element.parents('.form-group'),
                $icon      = $parent.find('.form-control-feedback[data-bv-icon-for="' + data.field + '"]'),
                options    = data.bv.getOptions(),                      // Entire options
                validators = data.bv.getOptions(data.field).validators; // The field validators

            if (validators.notEmpty && options.feedbackIcons && options.feedbackIcons.required) {
                // The field uses notEmpty validator
                // Add required icon
                $icon.addClass(options.feedbackIcons.required).show();
            }
        })

        .bootstrapValidator({
            feedbackIcons: {
                required: 'fa fa-asterisk',
                valid: 'fa fa-check',
                invalid: 'fa fa-times',
                validating: 'fa fa-refresh'
            },
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: 'The name is required'
                        }
                    }
                },
                description: {
                    validators: {
                        stringLength: {
                            max: 300,
                            message: 'The description must be less than 300 characters long'
                        }
                    }
                },
                price: {
                    validators: {
                        notEmpty: {
                            message: 'The price is required'
                        },
                        numeric: {
                            message: 'The price must be a number'
                        }
                    }
                },
                quantity: {
                    validators: {
                        notEmpty: {
                            message: 'The quantity is required'
                        },
                        integer: {
                            message: 'The quantity must be a number'
                        }
                    }
                }
            }
        })

        .on('status.field.bv', function(e, data) {
            // Remove the required icon when the field updates its status
            var $parent    = data.element.parents('.form-group'),
                $icon      = $parent.find('.form-control-feedback[data-bv-icon-for="' + data.field + '"]'),
                options    = data.bv.getOptions(),                      // Entire options
                validators = data.bv.getOptions(data.field).validators; // The field validators

            if (validators.notEmpty && options.feedbackIcons && options.feedbackIcons.required) {
                $icon.removeClass(options.feedbackIcons.required).addClass('fa');
            }
        });
});