Enabling Vanilla Javascript Validation Functions (VJF)

When enabling the VJF plugin, you can optionally enhance it using chriso/validator.js.

Install chriso/validator.js Package (optional)

chriso/validator.js it's not included in the package, so you have to install it manually.

npm install --save validator

Define a plugins object

Minimal setup:

import vjf from 'mobx-react-form/lib/validators/VJF';

const plugins = {
  vjf: vjf()
};

Using chriso/validator.js:

import vjf from 'mobx-react-form/lib/validators/VJF';
import validator from 'validator';

const plugins = {
  vjf: vjf({ package: validator })
};

import vjf from 'mobx-react-form/lib/validators/VJF';
import validator from 'validator';

const plugins = {
  vjf: vjf(validator)
};

import validator from 'validator';

const plugins = {
  vjf: validator
};

Create the form passing the plugins object

new Form({ ... }, { plugins });

Using the chriso/validator.js functions

You can now access the validator package in your custom function.

export function isEmail({ field, validator }) {
  const isValid = validator.isEmail(field.value); // <<---
  return [isValid, `The ${field.label} should be an email address.`];
}

The function takes in input an object with the following props:

• the form instance
• the field instance
• the validator instance

Check out how to define Custom VJF Validation Function