Handle multiple errors returned by Yup

[KrzysztofMadejski]

🚀 Feature request

When Yup returns a ValidationError aggregating multiple errors I'd like Formik to list all aggregated errors.

Current Behavior

Currently if Yup returns ValidationError then its message is shown.

Desired Behavior

With following validation:

clinicalFiles: Yup.array()
      .min(10, 'We expect you to provide 10 files')
      .max(10, 'We expect you to provide 10 files')
      .test('valid-domains', 'Domains are invalid', function (value: File[]) {
        let errors = validateFileNames(value.map(f => f.name));

        if (errors.length > 0) {
          let ve = this.createError({ message: 'Error that is shown' });
          ve.errors = errors; // these are not shown
          return ve;
        }

        return true;
      })

I'd expect Formik to show all aggregated errors.

Suggested Solution

If ValidationError ve packs other errors then show all of them, instead of just ve.message

Who does this impact? Who is this for?

Ppl using Yup validations (which are recommended by Formik)

Describe alternatives you've considered

Concatenating all errors:

      Yup.array().test('valid-domains', 'Domains are invalid', function (value: File[]) {
        let errors = validateFileNames(value.map(f => f.name));

        if (errors.length > 0) {
          return this.createError({ message: errors.join(". ") });
        }

        return true;
      })

[jazithedev]

Is there any progress in regards to this topic? I assume, that Formik still can't process multiple errors for a single field?

[dieguezz]

You can do it programmatically. Instead of using validationSchema use validate and the validateFunction should look something like this:

export function validateSchema(values, schema) {
  return schema
    .validate(values, {
      abortEarly: false,
      strict: false,
    })
    .then((res) => {
      return {}
    })
    .catch(mapYupToFormikErrors)
}

and do something like

validateSchema(values, schema)

[LyricL-Gitster]

Expanding on @dieguezz, this will give you a full validate method for a schema until such time that we can pass schema options to Formik:

const fullValidatorForSchema = (schema) => (values) => schema.validate(values, {
  abortEarly: false,
  strict: false,
}).then(() => ({})).catch(({inner}) => inner.reduce((memo, {path, message}) => ({
  ...memo,
  [path]: (memo[path] || []).concat(message),
}), {}))

So you can:

<Formik validate={fullValidatorForSchema(YupValidationSchema)} {...otherProps} />

And, then your Formik errors will be an array of all of the error messages.

[dieguezz]

Expanding on @dieguezz, this will give you a full validate method for a schema until such time that we can pass schema options to Formik:

const fullValidatorForSchema = (schema) => (values) => schema.validate(values, {
  abortEarly: false,
  strict: false,
}).then(() => ({})).catch(({inner}) => inner.reduce((memo, {path, message}) => ({
  ...memo,
  [path]: (memo[path] || []).concat(message),
}), {}))

So you can:

<Formik validate={fullValidatorForSchema(YupValidationSchema)} {...otherProps} />

And, then your Formik errors will be an array of all of the error messages.

I forgot to share my original mapYupToFormikErrors so it has the same shape than formik errors and you can avoid more customization further on

export function mapYupToFormikErrors(err: { inner: any[] }) {
  return err.inner
    .filter((i: { message: any }) => !!i.message)
    .reduce(
      (curr: any, next: { path: any; errors: any[] }) => ({
        ...curr,
        [next.path]: next.errors[0],
      }),
      {},
    )
}

[AndresPope]

the problem was solved? i need the same thing for my app, i need to show several error messages