Examples / Advance

Overriding default options

Assume that your page consists of many forms that need to be validated. These forms might use same options, such as feedbackIcons, default error message, etc.

As a natural approach, you have to repeat initializing the options as following:

$(document).ready(function() {
    $(firstForm).bootstrapValidator({
        message: 'The field is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        }
        ...
    });

    $(secondForm).bootstrapValidator({
        message: 'The field is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        }
        ...
    });
});

From v0.5.0, you can override the default options as below:

$(document).ready(function() {
    $.fn.bootstrapValidator.DEFAULT_OPTIONS = $.extend({}, $.fn.bootstrapValidator.DEFAULT_OPTIONS, {
        message: 'The field is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        }
    });
});

By overriding the default options, you don't need to repeat setting these options when calling the plugin:

$(document).ready(function() {
    $(firstForm).bootstrapValidator({
        // Don't need to set the feedbackIcons, message options anymore
        ...
    });

    $(secondForm).bootstrapValidator({
        // Don't need to set the feedbackIcons, message options anymore
        ...
    });
});

<form id="overrideOptionsForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-md-3 control-label">Your website</label>
        <div class="col-md-5">
            <input type="text" class="form-control" name="website" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-5 col-md-offset-3">
            <button type="submit" class="btn btn-default">Validate</button>
        </div>
    </div>
</form>

$(document).ready(function() {
    $.fn.bootstrapValidator.DEFAULT_OPTIONS = $.extend({}, $.fn.bootstrapValidator.DEFAULT_OPTIONS, {
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        }
    });

    $('#overrideOptionsForm').bootstrapValidator({
        fields: {
            website: {
                validators: {
                    notEmpty: {
                        message: 'The website address is required'
                    },
                    uri: {
                        message: 'The website address is not valid'
                    }
                }
            }
        }
    });
});