Enabling Vanilla Javascript Validation Functions (VJF)

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

Install validator Package (optional)

validator 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 validator.js:

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

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

VERSION < 6.9.0

Shortcut:

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

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

VERSION < 1.37

No need to import the plugin function:

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