Enabling Declarative Validation Rules (DVR)

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

Install skaterdav85/validatorjs Package

skaterdav85/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 });

results matching ""

    No results matching ""