bootstrapvalidator

BootstrapValidate

A jQuery plugin to validate form fields. Use with Bootstrap 3

Features

• Many built-in validators

Required

• jQuery
• Bootstrap 3

Demo

You can see the live demo here:

• Sample demo
• Validator examples

Usage

Since the BootstrapValidate plugin requires jQuery and Bootstrap 3, you have to include the required CSS and JS files to your page:

<link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/path/to/bootstrapvalidate.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>
<script type="text/javascript" src="/path/to/bootstrapvalidate.min.js"></script>

Call the plugin to validate the form as following:

$(document).ready(function() {
    $(<form Selector>).bootstrapValidate({
        message: <The default error message for all fields>,
        iconClass: {
            valid: <The icon class indicates a valid value>,
            invalid: <The icon class indicates an invalid value>
        },
        fields: {
            ...
            <fieldName>: {
                message: <The default error message for this field>,
                validator: {
                    ...
                    <validatorName>: <validatorOptions>
                    ...
                }
            }
            ...
        }
    }
});

The <validatorName> can be the name of the built-in validator which are described in the Validators section

Validators

Below is the list of built-in validators sorted in alphabetical order:

Validator name	Description
between	Checks if the input value is between (strictly or not) two given numbers
digits	Return true if the value contains only digits
emailAddress	Validate an email address
greaterThan	Return true if the value is greater than or equals to given number
hexColor	Validate a hex color
identical	Check if the value is the same as one of particular field
lessThan	Return true if the value is less than or equals to given number
notEmpty	Check if the value is empty
regexp	Check if the value matches given Javascript regular expression
remote	Perform remote checking via Ajax request
stringLength	Validate the length of a string
uri	Validate an URL address
usZipCode	Validate a US zip code

Between Validator

$(document).ready(function() {
    $(<form Selector>).bootstrapValidate({
        fields: {
            <fieldName>: {
                validator: {
                    between: {
                        message: ...,   // [required] The error message
                        min: ...        // [required] The lower value in the range
                        max: ...,       // [required] The upper value in the range
                        inclusive: ...  // [optional] Can be true or false. If true, the input value must be in the range strictly
                    }
                }
            }
        }
    }
});

Build

BootstrapValidate uses grunt to simplify building process.

From the BootstrapValidate root directory, execute the following commands to install the dependent packages (the administrator permission might be required):

$ npm install grunt --save-dev
$ npm install grunt-contrib-concat --save-dev
$ npm install grunt-contrib-copy --save-dev
$ npm install grunt-contrib-cssmin --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-contrib-watch --save-dev

Then, uses grunt to build:

$ grunt

If you want grunt to generate scripts whenever the original scripts (located in src) change, use the following command:

$ grunt watch

The generated scripts (including source and compressed versions) are placed inside the dist directory.

Author

Nguyen Huu Phuoc (Email / Twitter / Github)

License

Copyright (c) 2013 Nguyen Huu Phuoc

BootstrapValidate is licensed under the MIT license.