Bundling with Webpack

FormValidation was rewritten in ES6 from v1.0.0. It comes with the dist/es6 directory that consists of ES6 compatible classes. This guide shows how you can bundle FormValidation with Webpack.

Assume that your folder has the following structure:

the-root-directory
    |
    ├── node_modules
    ├── vendors
    |   └── formvalidation
    |       └── dist
    |           └── es6
    └── webpack.config.js

Now, you can set the alias to FormValidation by adding the resolve.alias setting to webpack.config.js:

// webpack.config.js
const path = require('path');

module.exports = {
    resolve: {
        extensions: ['.js'],
        alias: {
            formvalidation: path.resolve(__dirname, 'vendors/formvalidation/dist/es6'),
        },
    },
    ...
};

From now on, you can import any file from FormValidation ES6 package as following:

// Use the algorithms
import luhn from 'formvalidation/algorithms/luhn';

// Use the validators
import creditCard from 'formvalidation/validators/creditCard';

const result = creditCard().validate({
    value: ...,
    options: {
        message: ...,
    },
});

// Use the core library
import formValidation from 'formvalidation/core/Core';

// Use the plugins
import Icon from 'formvalidation/plugins/Icon';
import Trigger from 'formvalidation/plugins/Trigger';
import Bootstrap from 'formvalidation/plugins/Bootstrap';
...

Bundling with Webpack

See also