Bundling with Webpack

This guide is outdated and should be used for FormValidation v1.x.x only. From v2.0.0, FormValidation is available as npm packages and it can be bundled with Webpack like other npm packages.

FormValidation was rewritten in ES6 from v1.0.0. It comes with the @form-validation/cjs 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
    |   └── @form-validation
    |       └── cjs
    └── 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: {
            '@form-validation': path.resolve(__dirname, 'vendors/@form-validation/cjs'),
        },
    },
    ...
};

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

// Use the algorithms
import { algorithms } from '@form-validation/core';

// Use the validators
import { creditCard } from '@formv-alidation/validator-credit-card';

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

// Use the core library
import { formValidation } from '@form-validation/bundle/popular';

// Use the plugins
import { Icon } from '@form-validation/plugin-icon';
import { Trigger } from '@form-validation/plugin-trigger';
import { Bootstrap } from '@form-validation/plugin-bootstrap';
...

Bundling with Webpack

See also