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(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

results matching ""

    No results matching ""