Custom Vanilla Javascript Validation Functions (VJF)

Define custom functions

The validation functions takes in input an object with the following props:

  • the form instance
  • the field instance
  • the validator instance
export function shouldBeEqualTo(target) {
  return ({ field, form }) => {
    const fieldsAreEquals = (form.$(target).value === field.value);
    return [fieldsAreEquals, `The ${field.label} should be equal to ${form.$(target).label}`];

export function isEmail({ field }) {
  const isValid = (field.value.indexOf('@') > 0);
  return [isValid, `The ${field.label} should be an email address.`];

the validation functions must return an array with: [boolean, string];

Use the validation functions on the field's validators property

const fields = {
  email: {
    label: 'Email',
    related: ['emailConfirm'],
  emailConfirm: {
    label: 'Confirm Email',
    validators: [isEmail, shouldBeEqualTo('email')], // <<<
  • The validation functions can be used individually or as an array of functions.
  • The related property can be defined to validate other fields at the same time.


The functions can be also written using arrow functions:

export const isEmail = ({ field, validator }) => ([
  `The ${field.label} should be an email address.`,

or can be invalidated using the field.invalidate() method:

export function isEmail({ field, validator }) {
  if (validator.isEmail(field.value)) return true;
  return field.invalidate(`The ${field.label} should be an email address.`);

results matching ""

    No results matching ""