Overview

Getting used with FormValidation

The FormValidation package consists of the following files:

            
              formvalidation/
            
            
              
              |
              
            
            
              ├──           // Consists of TypeScript definition types
            
            
              
              |
              
              |
              
            
            
              
              |
                 └── formvalidation
            
            
              
              |
                     └── global.d.ts // Uses with the global UMD package 
              (
              dist/js
              )
              
            
            
              
              |
                     └── index.d.ts  // Uses with the ES6 package 
              (
              dist/es6
              )
              
            
            
              
              |
              
            
            
              └── dist            // Consists of generated files from src
            
            
              
              |
              
            
            
                 ├── amd         // AMD package
            
            
              
              |
              
            
            
                 ├── css         // Can be used 
              in
               browser
            
            
                 │   └── formValidation
              (
              .min
              )
              .css
            
            
              
              |
              
            
            
                 ├── es6         // Generated from src/js and can be used with ES6 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

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 ES6 module, then pick the dist/es6 folders.

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.

Guide Usage