React Hook Form + zodResolver: how to add field-level (async) validation that depends on hook data?

1 week ago 11
ARTICLE AD BOX

I’m using React Hook Form with Zod via zodResolver(schema).
For most fields, schema validation is fine, but I have a field that needs extra validation based on data fetched inside the field component (from a hook). Example (simplified):

export const SomeFormComponent = ({ control }) => { const { dataFromServer } = useServerSelectOptions(); return ( <Controller name="entityName" control={control} rules={{ validate: (value) => value !== dataFromServer?.serverValue || "Name already exists" }} render={({ field, fieldState }) => ( <Input {...field} /> )} /> ); };

When I enable resolver: zodResolver(schema), it looks like Zod “overrides” / blocks rules.validate and this field-level validation doesn’t run (or its error is replaced by schema errors).

Constraints:

I can’t build the schema inside SomeFormComponent because the schema is created much higher in the tree, and there are multiple steps/forms that need similar validations.

I want to keep Zod for the main schema validation but still support dynamic validation based on hook data.

Questions:

What is the recommended way to combine zodResolver with field-level validation in RHF?

How can I implement validation that depends on hook data inside a field component (possibly async) without moving the whole schema down?

Should I use superRefine, refine + context, custom resolver, setError, or something else?

Minimal example / suggestions appreciated.

Read Entire Article