jaredpalmer / jaredpalmer/formik

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

Open
#243 33 comments 71 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

in progress Type: Enhancement
Dominant language
TypeScript
Stars
34.3k
Forks
2.8k
PR merge metrics
No merged PRs in 30d

Description

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(/georges.abitbol@gmail.com/, '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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by tracing Formik's validateSchema() path and compare it with the Yup schema.validate() call shown in the issue, focusing on how abortEarly and multiple errors are handled. Done means determining whether the validation path can expose every error for one field and documenting or implementing the supported behavior, with relevant tests added if the project has coverage for this path.

Written by the indexing model from the issue text.

Assessment

Tech stack
react
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.