v0.5.3 is released on 2014.11.05!

Using language package

← Examples

Improve it on Github

The default messages have been translated into many languages, thank for all of awesome contributors.

In this example, I am going to show you how easy to use additional language package.

First, including the language package, right after the plugin script:

<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.js"></script>
<script type="text/javascript" src="/path/to/dist/js/language/languagecode_COUNTRYCODE.js"></script>

When calling the plugin, .bootstrapValidator(), just don't set the message option. The messages then are taken from the translation package.

The working example below shows an usage of French language package:

<!-- Include BootstrapValidator plugin first -->
<script src="/vendor/bootstrapvalidator/js/lbootstrapValidator.js"></script>

<!-- Then include the French language package -->
<script src="/vendor/bootstrapvalidator/js/language/fr_FR.js"></script>

<form id="registrationForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-3 control-label">Username</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" name="username" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 control-label">Email address</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" name="email" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 control-label">Password</label>
        <div class="col-sm-5">
            <input type="password" class="form-control" name="password" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 control-label">Gender</label>
        <div class="col-sm-5">
            <div class="radio">
                <label>
                    <input type="radio" name="gender" value="male" /> Male
                </label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="gender" value="female" /> Female
                </label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="gender" value="other" /> Other
                </label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 control-label">Date of birth</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" name="birthday" placeholder="YYYY/MM/DD" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-9 col-sm-offset-3">
            <button type="submit" class="btn btn-default">Sign up</button>
        </div>
    </div>
</form>
$(document).ready(function() {
    $('#registrationForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                validators: {
                    notEmpty: {
                    },
                    stringLength: {
                        min: 6,
                        max: 30
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9]+$/
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                    },
                    emailAddress: {
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                    },
                    stringLength: {
                        min: 8
                    }
                }
            },
            birthday: {
                validators: {
                    notEmpty: {
                    },
                    date: {
                        format: 'YYYY/MM/DD'
                    }
                }
            },
            gender: {
                validators: {
                    notEmpty: {
                    }
                }
            }
        }
    });
});