global-validators.md

Global Validators

You can add validators as properties to a global object named GlobalValidators. Once added to this object, they become available anywhere in your app. This is very handy to ensure your app doesn't end up with multiple versions of commonly used validators, and helps you and your team find and maintain existing validators.

Creating Global Validators

Here we create a global validator that ensures the input value contains the letter Z.

// define somewhere in your app
GlobalValidators.mustContainLetterZ: {
    errorMessage: 'Must contain the letter z',
    validator: (value) => !!value && value.toLowerCase().indexOf('z') > -1
};

Once this is done, you can then refer to it by name anywhere in your app:

<input type="password" {...useInput('password', 'mustContainLetterZ')} />

You can also create a custom validator reuses the validation function defined in the global validator, but overrides specific options such as the errorMessage:

<input
  type="password"
  {...useInput('password', {
      validator: 'mustContainLetterZ',
      errorMessage: 'Must contain the letter z'
    }
  })}
/>

Notice that the key of the custom validator matches the one from the global validator.

Customizing validators globally

Global validators are also useful to customize how built-in and third party validators operate, or the error messages associated with them.

// define somewhere in your app
GlobalValidators.isEmail: {
    errorMessage: 'Must contain the letter z'
};

Remember that the isEmail comes from the validator library so it must be installed for this validator to be available.

Because overriding a validator's error message is such a common use case, you can take a shortcut and assign the error message directly to the validator:

// define somewhere in your app
GlobalValidators.isEmail: 'Must contain the letter z';

From this point on, all isEmail validation errors in your will use the newly assigned error message