react-hook-form: [Validation] required validate message is not appear with yup schema

Describe the bug Required message is not appear with yup schema validation. only display ‘Invalid email’. I made yup schema what checks 2 validation, required and valid(w/ regex test)

To Reproduce Codesandbox: https://codesandbox.io/s/react-hook-form-required-not-appear-reproduce-losds

submit form without fill the email field
expect to display required message but invalid email is appeared.
but native validate is works as what I expected

Expected behavior Display required error message

Screenshots

Desktop (please complete the following information):

OS: MacOS 10.14.6
Browser: Chrome
Version: 76.0.3809.132
Library: 3.23.12

Additional context I think there is an issue in logic/validateWithSchema.ts. I’ve been through the same issue when I build a form without any form library just with yup. I have to find my old project to reference it. I need your opinion before that. do you think this is a bug? then, I’ll do.

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 27 (15 by maintainers)

Most upvoted comments

Don’t know if this is already discussed somewhere else, but if you found this issue while searching for this problem like I did, one possible solution is to use Yup.transform (with numbers) like this:

const validationSchema = yup.object({
  age: yup
    .number()
    .transform((cv: unknown, ov: unknown) =>
      typeof ov === "string" && ov.trim() === "" ? undefined : cv
    )
    .positive("age must > 0")
    .required("age is required")
});

Here’s a working codesandbox forked from the @hitbear518 one https://codesandbox.io/s/react-hook-form-required-not-appear-reproduce-gitzy

In the OP’s case (RegExp.test for email), you could just skip the test if the value is falsy:

.test("email", "Invalid email", value =>
  !value || /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/.test(
    value
  )
)

Codesandbox: https://codesandbox.io/s/react-hook-form-required-not-appear-reproduce-ycc4u

balzafin on Dec 30, 2019

@bluebill1049 I noticed, thanks for the awesome work!

The order won’t help with required numbers though as the type (Yup.number()) must be defined first? That’s not a problem of this library though and the transform workaround is just fine imo.

balzafin on Dec 30, 2019

FYI @balzafin on V4 we have fixed an issue with error reporting order. first rule in yup schema validation will report first.

bluebill1049 on Dec 30, 2019

@iamchanii really appreciate your blog post on react-hook-form 🙏 감사

bluebill1049 on Sep 24, 2019

So, that result is absolutely intended. because, yup runs all validate in parallels like Promise.all(). of course, there is a feature request related it, but it is not included in their priority list.

Ref: https://github.com/jquense/yup/issues/499#issuecomment-473111368 https://github.com/jquense/yup/issues/602#issuecomment-526154782

according to yup#499’s comment, I have to set abortEarly to false and display error what I want from returned ValidationErrors.

iamchanii on Sep 24, 2019

yep, I will.

iamchanii on Sep 24, 2019

I think it’s related with yup schema. I’m just close this issue. sorry, never mind.

iamchanii on Sep 24, 2019