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

[acezard]

Hi, sorry I didn't find another issue related to this problem. And since yup has first class support I thought it would be justified to ask about it.

So I'm trying to set an option, mainly here the abortEarly option. My goal is to have a password field with multiple errors displayed and it seems it was the only way. Couldn't find how to do that with validateSchema()

So I did the following instead:

  validate: (values) => {
    const schema = Yup.object().shape({
      email: Yup.string()
        .matches(/[email protected]/, 'cant change email'),
      providerName: Yup.string()
        .required('type your name'),
      password: Yup.string()
        .min(8, 'at least 8 chars')
        .matches(/[a-z]/, 'at least one lowercase char')
        .matches(/[A-Z]/, 'at least one uppercase char')
        .matches(/[a-zA-Z]+[^a-zA-Z\s]+/, 'at least 1 number or special char (@,!,#, etc).'),
      passwordConfirm: Yup.string()
        .equalTo(Yup.ref('password'), 'passwords don't match')
    })

    return schema.validate(values, { abortEarly: false })
      .then(() => {})
      .catch((err) => {
        throw err
      })
  }

This way I can get every error of a single field and map them to my components to display every error of a field at the same time. Isn't there a cleaner way ? Also I think it could be a good use case to showcase ? Thanks

[clentfort]

@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.

[stale[bot]]

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.

[umpc]

:/

[Tsymalyi]

I have the similar problem.
I need way to manage yup validation options
Now when i use several rules for one field they all called end return last error message.

[Woile]

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?

[stale[bot]]

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.

[umpc]

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.

[egemon]

@jaredpalmer could u help us please?

[DrJacobHolden]

Would love to see this become an option.

[mbrowne]

New PR for the new version of Formik (which is quite different since it now uses hooks):
https://github.com/jaredpalmer/formik/pull/1573

[tusharpari]

ght it

I also need to acheive the same, but not able to make it, can you please share the code pen example ?
Thanks

[KrzysztofMadejski]

This issue is also related: https://github.com/jaredpalmer/formik/issues/750

[KrzysztofMadejski]

@acezard solution don't work for me. Yup returns a ValidationError with packed errors, while Formik expects object with keys.

yupToFormErrors(err) mapping should be called , but it is internal function
https://github.com/jaredpalmer/formik/blob/24ac8ddbddc5717c57178b8a9e90f752fbaa6858/src/Formik.tsx#L216-L217

[dvakatsiienko]

Agree that we need an option to get a list of all current validation errors at the same time.

[acezard]

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

[usama093]

@acezard This may be late, But there is a property name inner that contain path & error message
err.inner.path will return something likeuser.[property]

[deathemperor]

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

[dvakatsiienko]

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

@jaredpalmer

100%. I have the same situation (create password validation).

[lamasagar]

Has anyone found any solution to this?
I'm having a similar issue.
While creating a password, I want to know which options passed and which options failed and display the errors on the UI.
Is it possible with Formik and Yup or is there any alternatives?

[Uneetpatel7]

@jaredpalmer please post a good work around, if any?

[jaredpalmer]

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

[mbrowne]

Weird that my comment got deleted; I guess it's not allowed to mention alternative libraries here. Good news that this feature will be considered for v3 though.