Bootstrap Validator - Best jQuery plugin to validate form fields

Bootstrap Validator is a best jQuery plugin to validate form fields. Designed to use with Bootstrap 3

Source: bootstrapvalidator.com

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/path/to/dist/css/bootstrapValidator.min.css"/>

<script type="text/javascript" src="/path/to/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script>

<!-- Either use the compressed version (recommended in the production site) -->
<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.min.js"></script>

If you want to use the default message translated in the language package, then finally include it:

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

2. HTML

<form>
    <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control" name="username" />
    </div>
    <div class="form-group">
        <label>Email address</label>
        <input type="text" class="form-control" name="email" />
    </div>
</form>

3. JAVASCRIPT

$(document).ready(function() {
    $('form').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                message: 'The username is not valid',
                validators: {
                    notEmpty: {
                        message: 'The username is required and cannot be empty'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_]+$/,
                        message: 'The username can only consist of alphabetical, number and underscore'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email is required and cannot be empty'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    }
                }
            }
        }
    });
});

More information at http://bootstrapvalidator.com/settings/

Basic

• Adjusting feedback icon position
• Set validator options via HTML 5 attributes
• Play with HTML 5 input types and attributes
• Validate a form placed inside a Bootstrap modal
• Use multiple elements with the same name
• Toggle field