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

See original GitHub issue

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

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:64
  • Comments:29 (1 by maintainers)

github_iconTop GitHub Comments

38reactions
woilecommented, Aug 26, 2018

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?

18reactions
DrJacobHoldencommented, Mar 5, 2019

Would love to see this become an option.

Read more comments on GitHub >

github_iconTop Results From Across the Web

get all validation errors · Issue #44 · jquense/yup - GitHub
I had to use the validateSync instead of the isValid . const isValidInput = async () => { try { const valid =...
Read more >
How to get first error while using yup to validate object schema
I want to retrieve the path of the first validation error. I tried it with validate() of yup. It has the option abortEarly...
Read more >
Easy Error Handling and Data Validation with Yup - Code Daily
Inside of our shape we give it our object, and specify that firstName is a string() and that it is required() . The...
Read more >
Yup Email Validation: String Schema Code Examples
When it comes to displaying error messages for email validation, Yup provides an easy way to input your own error message. Just pass...
Read more >
Form validation with Yup | Sanity.io guide
In React, there are many options for managing forms - Formik, ... on the object schema provided by Yup) and display of validation...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found