question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Validation via resolvers does not work with dependent fields (yup, vest)

See original GitHub issue

RHK version: 6.14.12 Resolvers version: 1.3.3 Codesandbox: https://codesandbox.io/s/epic-goldberg-pllwj

// My usage
useForm({
  defaultValues: { hasMoney: false, amount: 0 },
  mode: "onChange",
  resolver: vestResolver(validationSuite) || yupResolver(formSchema)
});

Schemas that depend on field values does not return correct errors object in errors or formState.errors or I’m missing something in configuration.

// Yup
const formSchema = object().shape({
  hasMoney: boolean().required(),
  amount: number().when('hasMoney', {
    is: true,
    then: number().required().min(1),
    otherwise: number().notRequired().optional()
  })
});
// vest
const validationSuite = vest.create((data = {}) => {
  test('hasMoney', "Has money is required", () => {
    enforce(data[HAS_MONEY]).isBoolean();
  });

  if (data.hasMoney === true) {
    test('amount', "Amount is a number", () => {
      enforce(data.amount).isNumber();
    });

    test('amount, "Amount is required", () => {
      enforce(data.amount).isNotEmpty();
    });

    test('amount', "Amount is more than 0", () => {
      enforce(data.amount).gte(1);
    });
  }
});

I believe the issue is somewhere in the resolvers or core package since validation of the same form data directly is causing the expected errors.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
v1adkocommented, Feb 2, 2021

Cool, thank you, guys. Maybe this limitation should be mentioned somewhere in the docs since the behaviour of the validation library differs if used within react-hook-form resolvers?

1reaction
bluebill1049commented, Feb 1, 2021

For depend on the field, you will have to use trigger, hook form is optimized for single field error.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Adding validations to React Hook Form - Daniel Afonso blog
In this blog post, I'll show you how add validations to your forms created using React Hook Form by using Yup.
Read more >
reactjs - Facing validation issues on nested and parent field ...
I've solved it myself. The issue was occurring because of using external validation library Yup. It is mentioned in documentation that ...
Read more >
What's new in React Hook Form's resolvers V2
The new resolver will enable you to validate only changed fields. This can be achieved by making a custom resolver and improve validation...
Read more >
useForm | React Hook Form - Simple React forms validation
This function allows you to use any external validation library such as Yup, Zod, Joi, Vest, Ajv and many others. The goal is...
Read more >
How to add React Hook Form with Typescript to React Js ...
resolver : Resolver. This function allows you to use any external validation library such as Yup, Zod, Joi, Vest, Ajv and many others....
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