jaredpalmer / jaredpalmer/formik
Yup schema.validate() options, show every error of a field at the same time
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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