Validation via resolvers does not work with dependent fields (yup, vest)
See original GitHub issueRHK 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:
- Created 3 years ago
- Comments:6 (4 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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?
For depend on the field, you will have to use
trigger
, hook form is optimized for single field error.