Overview

Getting used with FormValidation

The FormValidation package consists of three folders that support different formats.

The amd folder contains files that can be used with requirejs:

const { formValidation } = require('/path/to/@form-validation/amd/bundle/popular');

The cjs folder contains files that can be used with ES6 modules:

import { formValidation } from '/path/to/@form-validation/cjs/bundle/popular';

The esm folder contains files that can be used with the <script type=module> tag:

<script type="module">
    import { formValidation } from '/path/to/@form-validation/esm/bundle/popular.min.js';
</script>

The umd folder contains files that can be used as global scripts:

<script src="/path/to/@form-validation/umd/bundle/popular.min.js"></script>

Then you can access the formValidation property from the global FormValidation variable.

Each format has the same folder structures as follows:

├── bundle
|   ├── full(.min).js
|   └── popular(.min).js
|
├── core
|   └── index(.min).js
|
├── locales
│   ├── de_DE(.min).js
│   ├── en_US(.min).js
│   └── ...
|
├── plugin-[plugin-name]
|   └── index(.min).js
|
├── styles
|   └── index(.min).css
|
└── validator-[validator-name]
   └── index(.min).js

Folder	Description
`bundle`	Bundle core plugins and popular validators
`core`	The core of the library
`locales`	The translation packages
`plugin-[plugin-name]`	The given plugin where `[plugin-name]` represents the name of the plugin
`styles`	The CSS styles
`validator-[validator-name]`	The given validator where `[validator-name]` represents the name of the validator

Production vs development mode

Each folder has two versions: the normal code in the .css, .js files, and the minified code in the .min.css, .min.js files.

In order to reduce the page loading time and enhance the user experience when visiting your site, you should use the .min.css, .min.js files in the production website.

Meanwhile, in the development mode, you should use the normal files without .min part to debug the code more easily.

Popular vs full bundle

The bundle folder contains two files:

The full(.min).js file contains all core plugins and all validators |
The popular(.min).js file contains all core plugins and most popular validators

Most of the time, you only need to include the popular(.min).js file to your page. Since it is smaller than the full version in terms of file size, it will reduce the page loading time. Take a look at the validators page to see which validator belongs to the popular and full bundles.

For example, there are two ways to use the id validator:

Insert the full bundle to your page:

<script src="/path/to/@form-validation/umd/bundle/full.min.js"></script>

Insert the popular bundle and specific validators to your page:

<script src="/path/to/@form-validation/umd/bundle/popular.min.js"></script>
<script src="/path/to/@form-validation/umd/validator-id/id.min.js"></script>

It's recommended to use the second approach.

Guide Usage