Integrating with RE:DOM

This page will help you integrate FormValidation with the RE:DOM library. For the sake of simplicity, we are about to validate a simple login form with just two fields to input the username and password:

<form id="loginForm" method="POST">
    <div class="form-group row">
        <label class="col-sm-3 col-form-label">Username</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" name="username" />
        </div>
    </div>

    <div class="form-group row">
        <label class="col-sm-3 col-form-label">Password</label>
        <div class="col-sm-4">
            <input type="password" class="form-control" name="password" />
        </div>
    </div>

    <div class="form-group row">
        <div class="col-sm-9 offset-sm-3">
            <button type="submit" class="btn btn-primary">Login</button>
        </div>
    </div>
</form>

We can move the login form to a separate component:

// LoginForm.js
impor { el } from redom;

class LoginForm {
    constructor() {
        this.username = '';
        this.password = '';

        this.el = el(
            'form',
            { id: 'loginForm', method: 'POST' },
            el(
                'div', { className: 'form-group row'},
                el('label', { className: 'col-sm-3 col-form-label' }, 'Username'),
                el(
                    'div',
                    { className: 'col-sm-4' },
                    el(
                        'input',
                        { className: 'form-control', type: 'text', name: 'username', oninput: (e) => this.username = e.target.value }
                    )
                )
            ),
            el(
                'div', { className: 'form-group row'},
                el('label', { className: 'col-sm-3 col-form-label' }, 'Password'),
                el(
                    'div',
                    { className: 'col-sm-4' },
                    el(
                        'input',
                        { className: 'form-control', type: 'password', name: 'password', oninput: (e) => this.password = e.target.value }
                    )
                )
            ),
            el(
                'div', { className: 'form-group row'},
                el(
                    'div',
                    { className: 'col-sm-9 offset-sm-3' },
                    el(
                        'button',
                        { className: 'btn btn-primary', type: 'submit' },
                        'Login'
                    )
                )
            )
        );
    }
}

Bundling the library

First of all, you need to look at the following guide to see how we can bundle FormValidation with popular bundlers:

Creating a FormValidation instance

The best place to initialize a FormValidation instance is inside the component's onmount event:

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

class LoginForm {
    constructor() {
        // Render the form ...
    }

    onmount() {
        // Create a FormValidation instance
        this.fv = formValidation(document.getElementById('loginForm'), {
            fields: {
                username: {
                    validators: {
                        notEmpty: {
                            message: 'The username is required'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: 'The username must be more than 6 and less than 30 characters long',
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: 'The username can only consist of alphabetical, number and underscore',
                        },
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: 'The password is required'
                        },
                        stringLength: {
                            min: 8,
                            message: 'The password must have at least 8 characters',
                        },
                    }
                },
            },
            plugins: {
                ...
            },
        });
    }
}

Using the plugins

In order to use the plugins, we need to import them:

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

// FormValidation plugins
import { Icon } from '@form-validation/plugin-icon';
import { Trigger } from '@form-validation/plugin-trigger';
import { Bootstrap } from '@form-validation/plugin-bootstrap';
import { SubmitButton } from '@form-validation/plugin-submit-button';

class LoginForm {
    onmount() {
        this.fv = formValidation(document.getElementById('loginForm'), {
            fields: {
                ...
            },
            plugins: {
                trigger: new Trigger(),
                bootstrap: new Bootstrap(),
                icon: new Icon({
                    valid: 'fa fa-check',
                    invalid: 'fa fa-times',
                    validating: 'fa fa-refresh'
                }),
                submitButton: new SubmitButton(),
            },
        });
    }
}

Now the FormValidation instance is ready, you can listen on the events or call API:

// Listen on event
this.fv.on('core.field.invalid', (e) => {
    ...
});

// Call API
this.fv.revalidateField('...');

Registering validator

You don't need to follow this section if you are using a popular validator. The popular validator is ready when you import the FormValidation's core:

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

In the other cases, you have to use the registerValidator() method to let the library knows where it can find a special or custom validator:

// Import an external validator
import { phone } from '@form-validation/validator-phone';

// Or import your own validator
import strongPassword from '/path/to/your/strongPassword';

class LoginForm {
    onmount() {
        this.fv = formValidation(document.getElementById('loginForm'), {
            fields: {
                phoneNumber: {
                    validators: {
                        phone: { ... }
                    }
                },
                password: {
                    validators: {
                        checkPassword: { ... }
                    }
                },
            },
        });

        // Register validators
        this.fv.registerValidator('phone', phone)
               .registerValidator('checkPassword', strongPassword);
    }
}

Destroying FormValidation instance

RE:DOM component triggers the onunmount event when it's removed from page or not used anymore. It's the time to destroy our FormValidation instance by using the destroy() method: