Mobx React Form Validation

Skill: mobx-react-form-validation

Mission

Guide the user through setting up and using validation plugins in mobx-react-form.

Use this skill when the user needs to:

• Set up a validation plugin (DVR, VJF, SVK, YUP, JOI, ZOD)
• Define validation rules/functions
• Handle async validation
• Implement cross-field validation (related fields)
• Use validation hooks (onSuccess, onError)
• Configure validation options (timing, debounce, strictness)

Available Validation Plugins

| Driver | Package | Description | |--------|---------|-------------| | DVR | validatorjs | Declarative Validation Rules (string rules) | | VJF | validator (optional) | Vanilla JavaScript Functions | | SVK | ajv | JSON Schema Validation Keywords | | YUP | yup | Object Schema Validator | | JOI | joi | Object Schema Validator | | ZOD | zod | TypeScript-first schema validation |

You can mix multiple plugins on the same form.

DVR — Declarative Validation Rules

Setup

npm install validatorjs

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

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

Field Rules

const fields = {
  email:    { rules: 'required|email' },
  password: { rules: 'required|string|between:5,25' },
  age:      { rules: 'required|numeric|between:18,99' },
  website:  { rules: 'url' },
};

Rule format: 'rule1|rule2:param1,param2'

Extending DVR

const plugins = {
  dvr: dvr({
    package: validatorjs,
    extend: ({ validator }) => {
      validator.register('uppercase', (value) => value === value.toUpperCase());
    },
  }),
};

Async DVR

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

Then define async rules:

const rules = {
  username: 'required|asyncCheckUsername',
};

And register async validators:

const plugins = {
  dvr: dvr({
    package: validatorjs,
    extend: ({ validator }) => {
      validator.registerAsync('asyncCheckUsername', (value, _, done) => {
        setTimeout(() => done(value === 'admin' ? 'Username taken' : undefined), 1000);
      });
    },
  }),
};

Field-level async validation

const fields = {
  email: {
    rules: 'required|email',
    hooks: {
      async onChange(field) {
        if (!field.isValid) return;
        const res = await fetch(`/api/check-email?email=${field.value}`);
        const data = await res.json();
        if (!data.available) {
          field.invalidate('Email already registered');
        }
      },
    },
  },
};

VJF — Vanilla JavaScript Functions

Setup

npm install validator   # optional

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

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

Field Validators

import isEmail from 'validator/lib/isEmail';

const validators = {
  email: isEmail,
  password: [(val) => val.length >= 6, 'Password must be at least 6 characters'],
  age: [
    (val) => !isNaN(val) && Number(val) >= 18,
    'Must be at least 18 years old',
  ],
};

Validator format: function or [function, errorMessage] or [function1, function2, errorMessage].

Extending VJF

const plugins = {
  vjf: vjf({
    extend: ({ validatorjs, validator }) => {
      // Add custom validation functions
    },
  }),
};

Async VJF

Return a Promise from the validator function:

const validators = {
  username: [
    async (value) => {
      const res = await fetch(`/api/check-username?value=${value}`);
      return res.json().then(data => data.available);
    },
    'Username is already taken',
  ],
};

SVK — Schema Validation Keywords

Setup

npm install ajv

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

const plugins = {
  svk: svk({
    package: Ajv,
    config: {
      schema: {
        type: 'object',
        properties: {
          email:    { type: 'string', format: 'email' },
          password: { type: 'string', minLength: 6 },
          age:      { type: 'number', minimum: 18 },
        },
        required: ['email', 'password'],
      },
    },
  }),
};

Fields are auto-created from the JSON Schema properties when no explicit fields are defined.

Extending SVK

const plugins = {
  svk: svk({
    package: Ajv,
    config: {
      schema: { ... },
      extend: (ajv) => {
        ajv.addKeyword('myKeyword', { validate: (schema, data) => data.length > 0 });
      },
    },
  }),
};

Async SVK

const plugins = {
  svk: svk({
    package: Ajv,
    config: {
      schema: { ... },
      async: true,
      extend: (ajv) => {
        ajv.addKeyword('asyncCheck', {
          async: true,
          validate: (schema, data) => fetch(`/api/check?val=${data}`).then(r => r.json()),
        });
      },
    },
  }),
};

YUP — Object Schema Validator

Setup

npm install yup

import yupValidator from 'mobx-react-form/lib/validators/YUP';
import * as yup from 'yup';

const schema = yup.object({
  email: yup.string().email().required(),
  password: yup.string().min(6).required(),
  age: yup.number().min(18),
});

const plugins = {
  yup: yupValidator({ package: yup, config: { schema } }),
};

JOI — Object Schema Validator

Setup

npm install joi

import joiValidator from 'mobx-react-form/lib/validators/JOI';
import Joi from 'joi';

const schema = Joi.object({
  email: Joi.string().email().required(),
  password: Joi.string().min(6).required(),
});

const plugins = {
  joi: joiValidator({ package: Joi, config: { schema } }),
};

ZOD — TypeScript-first schema validation

Setup

npm install zod

import zodValidator from 'mobx-react-form/lib/validators/ZOD';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(6),
});

const plugins = {
  zod: zodValidator({ package: z, config: { schema } }),
};

Validation Hooks

const hooks = {
  onSuccess(form) {
    alert('Form is valid!');
    console.log('Values:', form.values());
    // Send to API...
  },
  onError(form) {
    alert('Form has errors!');
    console.log('Errors:', form.errors());
  },
};

Hooks can return a Promise for async submission:

const hooks = {
  async onSuccess(form) {
    await fetch('/api/submit', {
      method: 'POST',
      body: JSON.stringify(form.values()),
    });
  },
};

Validation Options (Form & Field level)

| Option | Default | Description | |--------|---------|-------------| | validateOnInit | true | Validate on form initialization | | validateOnSubmit | true | Validate on submit | | validateOnBlur | true | Validate on field blur | | validateOnChange | false | Validate on every keystroke | | validateOnChangeAfterInitialBlur | false | Validate on change after first blur | | validateOnChangeAfterSubmit | false | Validate on change after first submit | | validateOnClear | false | Validate on clear | | validateOnReset | true | Validate on reset | | showErrorsOnInit | false | Show errors on init | | showErrorsOnSubmit | true | Show errors on submit | | showErrorsOnBlur | true | Show errors on blur | | showErrorsOnChange | true | Show errors on change | | stopValidationOnError | false | Stop validating after first driver error | | validationDebounceWait | 250 | Debounce wait in ms | | validationPluginsOrder | undefined | Array: ['vjf', 'dvr', 'svk', 'yup', 'zod', 'joi'] | | validateDisabledFields | false | Validate disabled fields | | validateDeletedFields | false | Validate soft-deleted fields | | validatePristineFields | true | Validate pristine (unchanged) fields | | validateTrimmedValue | false | Trim value before validation | | resetValidationBeforeValidate | true | Reset validation state before re-validating |

Cross-Field Validation (related fields)

Use the related property to validate other fields when a field changes:

const fields = {
  password: {
    label: 'Password',
    rules: 'required|min:6',
    related: ['passwordConfirm'], // re-validate confirm when password changes
  },
  passwordConfirm: {
    label: 'Confirm Password',
    rules: 'required|same:password',
  },
};

Or validate related fields programmatically:

form.$('password').validate({ related: true, showErrors: true });

Field-Level Validation Hooks

const fields = {
  email: {
    hooks: {
      onInit(field) { /* after field creation */ },
      onChange(field) { /* after value change */ },
      onFocus(field) { /* after focus */ },
      onBlur(field) { /* after blur */ },
    },
  },
};

Manual Validation

// Validate entire form
form.validate({ showErrors: true })
  .then(({ isValid }) => { /* ... */ });

// Validate single field
form.$('email').validate({ showErrors: true })
  .then(({ isValid }) => { /* ... */ });

// Validate with related fields
form.validate({ showErrors: true, related: true });

// Manual submit with validation overrides
form.submit({}, {
  validate: true,
  execOnSubmitHook: false,
  execValidationHooks: true,
});

Invalidate Programmatically

// Mark field as invalid
form.$('email').invalidate('Custom error message');

// Mark form as invalid
form.invalidate('Form-level error');

// Async invalidation
field.invalidate('Already taken', true, true); // (message, deep, async)

Validation Plugin Order

When using multiple plugins, control execution order:

const options = {
  validationPluginsOrder: ['vjf', 'dvr'], // VJF runs first, then DVR
  stopValidationOnError: true,            // stop after first failure
};

Key Takeaways

1. 6 plugins available: DVR, VJF, SVK, YUP, JOI, ZOD — mix and match.
2. Related fields: Use related: ['fieldPath'] for cross-field validation.
3. Async validation: Return Promises from validators or use async hooks.
4. Validation hooks: onSuccess / onError trigger after submit/validate.
5. Debounced: Validation is debounced at 250ms by default.
6. Per-field options: Each field can override form-level validation options.
7. Programmatic invalidation: field.invalidate(msg) for custom errors.

Related Skills

• [mobx-react-form-api](../mobx-react-form-api/SKILL.md) — Core API prerequisite
• [mobx-react-form-flat](../mobx-react-form-flat/SKILL.md) — Field definitions with rules
• [mobx-react-form-nested](../mobx-react-form-nested/SKILL.md) — Validation with nested fields
• [mobx-react-form-events](../mobx-react-form-events/SKILL.md) — Event hooks
• [mobx-react-form-options](../mobx-react-form-options/SKILL.md) — Validation timing options

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: foxhound87
• Source: foxhound87/skills
• License: MIT

Install and usage instructions live in the source repository linked above.