Usage

bootstrap-validate is built with ease-of-use in mind. You don't need to be a JavaScript Wizard to use this library!

The bootstrapValidate() function

This library exposes a single function:bootstrapValidate().

Currently, you can pass up to 3 Arguments:

• The first Argument is the Element to be validated:bootstrapValidate('#myInput')
• The second Argument is any number of rules:bootstrapValidate('#myInput', 'rule')
• While the last Argument is an optional callback function knowing about the validity of the input:

bootstrapValidate('#myInput', 'rule', function (isValid) {
   if (isValid) {
       alert('Element is valid');
   } else {
       alert('Element is invalid');
   }
});

Passing an Element

Passing an Element to bootstrap-validate is exactly the same as usingdocument.querySelector(), so you can pass a classbootstrapValidate('.myClass'), an idbootstrapValidate('#myId')or any other querybootstrapValidate('input[type="text"]').

Passing Multiple Elements

If you want to apply the same validation rules to multiple input elements, you can pass an Array of selectors:

bootstrapValidate(['#prename', '#lastname'], 'max:20:Enter no more than 20 characters!');

Read more about document.querySelector.

About Rules and Options

Throughout the documentation around bootstrap-validate we make use of two (and only two) concepts: Rules and Options.

What is a Rule?

A rule is a condition to be met for your input element. If you wanted your visitor to enter an E-mail address, You would want to make use of the email rule.

bootstrapValidate('#input', 'email')

Of course, you can pass multiple rules.

Separate multiple rules with a |.

bootstrapValidate('#input', 'email|required'

But wait, there is Options!

The examples above would not work if you pasted them right into your Code. Every rule has to be supplied with at least one Option: The error text, which comes after all other options.

In the following, we will use the email rule, which does not have any options except from the obligatory error text.

Separate options with a :.

bootstrapValidate('#email', 'email:Enter a valid E-Mail!')

Options are the place to supply necessary rule parameters. For Instance, there is a min rule telling your user to fill in at least X characters. If you wanted to make that 5 characters, you would writebootstrapValidate('#input', 'min:5:Enter at least 5 Characters');

← InstallationDownload →