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:
class LoginForm {
onunmount() {
if (this.fv) {
this.fv.destroy();
}
}
}

See also