[SOLVED] Multiple validation to same field in react final form

Multiple validation to same field in react final form

Is there a way to add multiple validation to single field in React Final Form? Something like:

<Field
  name='email'
  label='email'
  validate={[emailValidator, emptyValidator}]
/>

There is similar type of validation in redux-form. Is it there a way to do this type of validation in React Final Form?

Solution

You can provide multiple validators to Field using helper function eg. composeValidators

const required = value => (value ? undefined : 'Required');
const mustBeNumber = value => (isNaN(value) ? 'Must be a number' : undefined);
const minValue = min => value =>
  isNaN(value) || value >= min ? undefined : `Should be greater than ${min}`;

const composeValidators = (...validators) => value =>
  validators.reduce((error, validator) => error || validator(value), undefined);

And use it like:

<Field 
name="age" 
validate={composeValidators(required, mustBeNumber, minValue(18))} 
/>

check official example here Field-Level Validation