Overview

Getting used with FormValidation

The FormValidation package consists of the following files:


formvalidation/
|
├── dist            // Consists of generated files from src
|   |
│   ├── css         // Can be used in browser
│   │   └── formValidation(.min).css
|   |
|   ├── es6         // Generated from src/js and can be used with JavaScript module
│   │   ├── ...
│   │   ├── core
│   │   ├── locales
│   │   ├── plugins
│   │   ├── validators
│   │   └── index.js
|   |
│   └── js          // Can be used in browser
|       |
│       ├── locales     // The translation packages
│       │   ├── de_DE(.min).js
│       │   ├── en_US(.min).js
│       │   └── ...
|       |
│       ├── plugins
│       │   ├── Bootstrap(.min).js
│       │   ├── Bootstrap3(.min).js
│       │   └── ...
|       |
│       ├── FormValidation.full(.min).js
│       └── FormValidation(.min).js
│
└── src             // Source files
    |
    ├── css         // CSS source files made in SCSS
    │   ├── plugins
    │   │   ├── _bootstrap.scss
    │   │   ├── _bootstrap3.scss
    │   │   └── ...
    │   │
    │   ├── _core.scss
    │   └── index.scss
    │
    └── js          // JavaScript source files made in Typescript
        ├── ...
        ├── core
        ├── locales
        ├── plugins
        ├── validators
        └── index.ts

If you don't know which files should be used in your application, then here is the guideline:

  • If you want to use the library in browsers, then upload the dist/css and dist/js folders to the server.
  • If you want to use the library with JavaScript module, then pick the dist/es6 folders.
  • Lastly, if you are curious about how the library is developed, then the source folder src is place you will look at.

Production vs development mode

Each file in the dist/css and dist/js folders 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 easy.

Default vs full version

The dist/js folder contains two verions of the core library:

  • FormValidation(.min).js: Contains most popular validators
  • FormValidation.full(.min).js: Contains all validators

In most of the times, you only need to include the FormValidation(.min).js file to your page. Since it is smaller than the full version in term of the file size, it will reduce the page loading time.

Take a look at the Validators page to see which validator belongs to the default and full versions.