Enabling Declarative Validation Rules (DVR)

We are using validatorjs to enable Declarative Validation Rules (DVR) with automatic Error Messages.

Install validatorjs Package

validatorjs is not included in the package, so you have to install it manually.

npm install --save validatorjs

Define a plugins object

Pass the validatorjs package to the DVR plugin.

import dvr from "mobx-react-form/lib/validators/DVR";
import validatorjs from "validatorjs";

const plugins = {
  dvr: dvr({ package: validatorjs }),
};

VERSION < 6.9.0

Shortcut:

import dvr from "mobx-react-form/lib/validators/DVR";
import validatorjs from "validatorjs";

const plugins = {
  dvr: dvr(validatorjs),
};

VERSION < 1.37

No need to import the plugin function:

import validatorjs from "validatorjs";

const plugins = {
  dvr: validatorjs,
};

Add the rules property to the form fields

Check the Available Rules

const fields = {
  username: {
    label: "Username",
    value: "SteveJobs",
    rules: "required|string|between:5,15",
  },
  email: {
    label: "Email",
    value: "s.jobs@apple.com",
    rules: "required|email|string|between:5,15",
  },
};

Create the form passing the plugins object

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