[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

1. submit form without fill the email field
2. expect to display required message but invalid email is appeared.
3. 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.

[balzafin]

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]

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