Async Validation With Zod

[Mortuie]

So we are currently using React Hook Form with a zod resolver/validation. Zod does support async validation, however we cannot use that functionality because it requires the validator to call parseAsync, which I assume is not happening here, because we are getting a suspicious error.

Does anyone have any ideas/better ways to implement this?

Thanks in advance

[leapful]

@Mortuie

You can use resolver option "mode=async" from zod resolver to achieve that asynchronous validation.

zodResolver(schema, schemaOptions, resolverOptions)

Reference: https://github.com/react-hook-form/resolvers/blob/420e86200a311e09405b90ab1759ed2086392d4a/zod/src/zod.ts#L58-L66

[uehlbran]

This does nothing to prevent Zod from throwing errors during validation if using async refinements.

[lennerd]

Whats error you encountering?

[Evanion]

I have the same issue, I have a resolver that checks that a slug is not already registered in the database, and even though I have zodResolver(formSchema, { async: true }, { mode: "async" }), and the async validation function returns true zod still throws an error that the slug field is invalid.

[Moshyfawn]

Would you mind modifying this codesandbox to reproduce your problem?

[Evanion]

sorry, I posted in discord, and solved it.
https://discord.com/channels/754891658327359538/1192154056353914901/1192154056353914901
It seems that lodash.debounce doesn't play nice with promises, but switching to awesome-debounce-promise solved it.

[vovados1]

@Evanion can u please upload the solution here? The discord link doesn't work for some reason.

[Moshyfawn]

The solution was to switch to awesome-debounce-promise.

[vovados1]

Can I see an example? What I'm trying to do is to check if email is already used in the database. I use .refine() with an async function and get this .asyncParse error from react-hook-form.

[Moshyfawn]

Sure, if @Evanion would like to give an example.