Usage

Steps to use FormValidation

1. Uploading required files to server

You need to upload entire dist/css and dist/js folders to your server. The next steps assume that these folders are placed inside vendors/formvalidation.

2. Including necessary files

Add library's CSS and JavaScript files to the head and right before the body tags:

Since the library is written completely in ECMAScript 6 (ES 6), we need es6-shim.min.js to help the older browsers understand the mordern features in ES6.

As mentioned in the previous section, FormValidation.min.js provides the most popular validators. You have to replaced it with FormValidation.full.min.js if you want to use all validators.

To reduce the page loading time:

  • Use the minified versions (.min.css and min.js files)
  • Insert the JavaScript files right before the body tag

3. Writing form and declaring validator rules

The library allows to define the validator for field that is taken from the value of name attribute. The following snippet is a basic example of a logging in form:

As you can see, FormValidation.formValidation accepts two parameters:

  • The first parameter is the form element, which can be retrieved by the document.getElementById() method
  • The second parameter contains the options which is actually a JavaScript object. Its fields property maps the field name to the validator rules. The field name is defined by the name attribute, while the validator rules are defined by mapping the validator name to its options.

Tip

If the field name contains special characters such as ., [, ], you must wrap it between single or double quote. See the Special field name page

Tip

If the field doesn't have the name attribute, you can use a CSS selector to specify it

All validators provides a common option named message that will be used to inform user if the associated field is invalid.

Tip

The options can be updated on the fly with the updateValidatorOption() method

You don't need to remember the options of any validator, because you can refer to them in each validator page.

Here is what we have been following so far:

Hey, I try to play with the form. Neither clicking the Submit button nor typing on the username or password field does perform any validations.

That is the time to register plugins.

4. Adding plugins

FormValidation is developed on plugin based architecture. Its solid, lighweight core libary only implements needed methods and connects all plugins together. We need to enable some basic plugins to make the validation works.

In order to enable a particular plugin, you need to insert the plugin script (if required) and map a name with its instance in the plugins option:

We are going to enable some plugins to make the validations happen:

Our demo page now looks like:

Finally, you can try it in the following form to see how the validation works. Either clicking the Submit button or filling in the fields to see it in action.

5. Using with popular CSS frameworks

In the previous section, you learn how to use FormValidation with a native form. Nowadays, it's very common that you rely on a CSS framework to speed up the development. FormValidation brings support for a lot of popular CSS frameworks. Each of them is supported by specific plugin which helps you minimize the integration parts such as automatically enabling the Message plugin, displaying the error messages at desired area instead of putting them at the bottom of form, etc.

The following sample code is a starter page for using the Bootstrap plugin to validate a form made in the Bootstrap 4 framework:

Note

Bootstrap.min.js is the plugin provided by FormValidation. It is NOT the same as Bootstrap(.min).js file provided by Bootstrap framework.

You can see the sample code demonstrating for each plugin in the following example:

Refer to each plugin below if you want to get supports for particular CSS framework: