Steps to use FormValidation
1. Uploading required files to server
You need to upload entire
dist/js folders to your server. The next steps assume that these folders are placed inside
2. Including necessary files
head and right before the
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 (
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
fieldsproperty maps the field name to the validator rules. The field name is defined by the
nameattribute, while the validator rules are defined by mapping the validator name to its options.
TipIf the field name contains special characters such as ., [, ], you must wrap it between single or double quote. See the Special field name page
TipIf the field doesn't have the
nameattribute, 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.
TipThe 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
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.
Bootstrap.min.jsis the plugin provided by FormValidation. It is NOT the same as
Bootstrap(.min).jsfile 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: