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

Showing required icon for the mandatory fields

Examples

If you want to reuse the behaviour in this example, take a look at the mandatoryIcon add-on.

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

$(document).ready(function() {
    $(form).formValidation({
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        }
        ...
    });
});
Setting Description
icon.valid Shown when the field is valid
icon.invalid Shown when the field is invalid
icon.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).formValidation({
        icon: {
            required: 'glyphicon glyphicon-asterisk',
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        }
        ...
    });

    // Use FontAwesome icons
    $(form).formValidation({
        icon: {
            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.fv event which is called after the field is initialized by the plugin
  • Hide the required icons by triggering the status.field.fv 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-xs-3 control-label">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-5">
            <textarea class="form-control" name="description" rows="5"></textarea>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Price</label>
        <div class="col-xs-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-xs-3 control-label">Quantity</label>
        <div class="col-xs-3">
            <input type="text" class="form-control" name="quantity" />
        </div>
    </div>

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

<script>
$(document).ready(function() {
    $('#productForm')
        // IMPORTANT: You must declare .on('init.field.fv')
        // before calling .formValidation(options)
        .on('init.field.fv', function(e, data) {
            // data.fv      --> The FormValidation instance
            // data.field   --> The field name
            // data.element --> The field element

            var $icon      = data.element.data('fv.icon'),
                options    = data.fv.getOptions(),                      // Entire options
                validators = data.fv.getOptions(data.field).validators; // The field validators

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

        .formValidation({
            framework: 'bootstrap',
            icon: {
                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.fv', function(e, data) {
            // Remove the required icon when the field updates its status
            var $icon      = data.element.data('fv.icon'),
                options    = data.fv.getOptions(),                      // Entire options
                validators = data.fv.getOptions(data.field).validators; // The field validators

            if (validators.notEmpty && options.icon && options.icon.required) {
                $icon.removeClass(options.icon.required).addClass('fa');
            }
        });
});
</script>
If the form uses different input types which might cause the required icon not shown properly, you can adjust its position.