Enabling Json Schema Validation Keywords (SVK)

We are using epoberezkin/ajv to enable Schema Validation Keywords (SVK) with automatic Error Messages.

Install epoberezkin/ajv Package

epoberezkin/ajv is not included in the package, so you have to install it manually.

npm install --save ajv

Create the json schema

See json-schema.org for more info

const $schema = {
  type: 'object',
  properties: {
    username: { type: 'string', minLength: 6, maxLength: 20 },
    password: { type: 'string', minLength: 6, maxLength: 20 }
  }
};

Define a plugins object

Pass the ajv package and the previously defined schema to the SVK plugin.

import svk from 'mobx-react-form/lib/validators/SVK';
import ajv from 'ajv';

const plugins = {
  svk: svk({
    package: ajv,
    schema: $schema,
    options: { ... }, // ajv options
  })
};

import ajv from 'ajv';

const plugins = {
  svk: ajv
};

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

See here more info about epoberezkin/ajv options.

Create the form passing the plugins object

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

Default AJV options used by mobx-react-form

{
  errorDataPath: 'property',
  allErrors: true,
  coerceTypes: true,
  v5: true,
}

Remove AJV Warnings from webpack

Add this line to your webpack config in the plugins array:

new webpack.IgnorePlugin(/regenerator|nodent|js\-beautify/, /ajv/)