formik: Yup schema.validate() options, show every error of a field at the same time

I’m also interested in this, I would like to know what are the proposed solutions. I’d like to have something like:

errors = {
  name: [
    "Too short",
    "Cannot contain numbers",
  ]
}

Is it possible?

Would love to see this become an option.

Comments here keep getting upvotes, so I’m going to post this and hopefully keep this issue open for addressing it in the near future.

@jaredpalmer I’m also facing this problem. Would you be open to a validationSchemaOptions-property on the Formik-component? If so Id’ be willing to provide a PR.

Showing multiple errors at the same time is more friendly. Especially in case of setting a password. Without it, it’s bad impression for new users. I really think this need more attention.

@jaredpalmer

@jaredpalmer could u help us please?

Hola! So here’s the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally–seriously–this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.

I wrote a small function to convert the yup error into an error object:

import { ValidationError } from 'yup';

type ErrorObject = {
  [field: string]: string[];
};
/**
 * Convert yup error into an error object where the keys are the fields and the values are the errors for that field
 * @param {ValidationError} err The yup error to convert
 * @returns {ErrorObject} The error object
 */
export function yupErrorToErrorObject(err: ValidationError): ErrorObject {
  const object: ErrorObject = {};

  err.inner.forEach((x) => {
    if (x.path !== undefined) {
      object[x.path] = x.errors;
    }
  });

  return object;
}

Here’s how I addressed:

validate={(values) => {
  // Return all errors at once
  return validationSchema.validate(values, { abortEarly: false })
  .then(() => {})
  .catch((err) => {
    return err.inner.reduce((obj, e) => {
      if (!(e.path in obj)) obj[e.path] = []
      obj[e.path] = obj[e.path].concat(e.errors)
      return obj
    }, {})
  })
}}

Here’s how I addressed:

validate={(values) => {
  // Return all errors at once
  return validationSchema.validate(values, { abortEarly: false })
  .then(() => {})
  .catch((err) => {
    return err.inner.reduce((obj, e) => {
      if (!(e.path in obj)) obj[e.path] = []
      obj[e.path] = obj[e.path].concat(e.errors)
      return obj
    }, {})
  })
}}

where to use this validate function

The solution is to use a custom validate prop for now. We’ll reevaluate in v3

Got any examples of that?

Step 1: Paste this out of your function const asyncValidateSchema = (schema) => (values) => schema .validate(values, { abortEarly: false, strict: false, }) .then(() => ({})) .catch(({ inner }) => inner.reduce( (memo, { path, message }) => ({ ...memo, [path]: (memo[path] || []).concat(message), }), {} ) ); Step 2: Change Formik validation schema to validate <Formik enableReinitialize={true} onSubmit={(values, actions) => handleSubmit(values, actions) } initialValues={defaultState} validate={asyncValidateSchema(validationSchema)} > Step 3: Now add validation schema outside the function const validationSchema = yup.object().shape({ new_password: yup .string() .required() .min(8, "At least 8 characters") .upperCaseCheck() .numberCheck() .specialCharacterCheck() .lowerCaseCheck(), re_new_password: yup .string() .required() .oneOf( [yup.ref("new_password"), null], "The password you entered does not match" ), }); I have added some validation scenarios for password yup.addMethod(yup.string, "upperCaseCheck", function (errorMessage) { return this.test(oneUpperCase, errorMessage, function (value) { const { path, createError } = this; // change regex here to make other functions if (!/(?=.*[A-Z])/.test(value)) { return createError({ message: At least one uppercase letter, path: path, // Fieldname }); } return true; }); }); Now you will get a list of errors inside errors.new_password. Hope this helps. Cheers!

Yeah my solution is 3 years old at this point @KrzysztofMadejski, I would not be surprised if it’s broken by now.

Sadly it seems this issue has been neglected, but I don’t blame the formik owner, open source is open source.

I guess my ticket could be closed maybe, I don’t know. Formik has changed a lot since then