issue: custom validadtion gets overwritten by zod resolver

[dorbn4]

Version Number

7.43.7

Codesandbox/Expo snack

https://codesandbox.io/s/aged-architecture-z8dtdr?file=/src/App.tsx

Steps to reproduce

See codesandbox :)

Zod and react hook form are amazing libraries.

Context: If you use a resolver in your RHF all of your custom validation (inside the controller and register) is overwritten and not even applied.

Use case: Numeric min/max input for e.g. min/max price/amount etc.

References:

• Ref 1,
• Ref 2

Expected behaviour

My custom validation should overwrite (or extend) the zod resolver.

IF this is expected THEN we should hide the validation method from the controller/register methods and make it clearer in the documentation.

BUT I really think that this is a bug and should be resolved (would also be up for a PR but want to first understand the reasoning if there is any)

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[bluebill1049]

Please refer to the doc below:

https://react-hook-form.com/api/useform/

A resolver can not be used with the built-in validators (e.g.: required, min, etc.)

[leapful]

@dorbn4

The built-in validation rules of react-hook-form are aligned with common web API validation as it's applied on field-level while schema validation library like zod is built to centralize all validation rules as a single source of truth.

Mixing built-in validation and schema validation only makes the implementation of validation handling more complex and leads to more confusion on debugging and solving problems. For example, your use case expects to overwrite or expand zod resolver, but the other developers might want the opposite.

If you validation use case is simple and purely related to common web API validation, just stick with it, otherwise, if it's very complex and requires more customization or transformation, please use schema validation library

[marianban]

It would be nice to have the default validation resolver function as an input parameter of the resolver function so the build in validators can still be manually triggered.

[camin-mccluskey]

Is there any way to achieve the same outcome without removing the resolver? I've tried using setError but run into a similar issue whereby the isValid value is still true due to the zod validation.

[janvorwerk]

Yes, I am wondering how we could keep a zod schema, yet add another custom validation rule on top.

For instance: a form letting the user change it's email address: I just want to validate that the typed address is not the current one. This does not belong to the data schema... it's just elsewhere.

Indeed, having the validate() function receive another chained validator (as suggested by @marianban )would be perfect: it would let the dev choose exactly when and if the other validators would be called.

[janvorwerk]

FWIW, I found a workaround with a watch:

  useEffect(() => {
    const subscription = form.watch((values, { type }) => {
      if (values.email === user.email) {
        form.setError("email", { message: "This is already your current address" });
      } else {
        form.clearErrors("email");
        void form.trigger("email");
      }
    });
    return () => subscription.unsubscribe();
  }, [form.watch]);

I wish I could only validate on blur, so that the field is not in error after the 1st key stroke... Something like:

if (type === "blur") {

But the type is always "change": the watch callback does not get called on blur events. I had to add the onBlur handler myself and deal with that is a react state hook.

[Mcoder995]

Here is my solution:

function Form() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormType>({
    resolver: zodResolver(
      zodDemoMinMaxSchema.superRefine((data, ctx) => {
        Object.keys(errors).forEach((error) => {
          ctx.addIssue({
            path: [error],
            message: errors[error as keyof FormType]?.message,
            code: "custom",
          });
        });
      })
    ),
    defaultValues: {
      priceRange: {
        min: 0,
        max: 0,
      },
    },
  });

[eqqe]

Thanks @Mcoder995 ! I have changed a bit for my use

    const form = useForm({
        resolver: zodResolver(
            formSchema.superRefine((data, ctx) => {
                const checkNestedErrors = (errors: FieldErrors, path: string[] = []) => {
                    Object.entries(errors).forEach(([key, error]) => {
                        if (error?.type === 'custom') {
                            console.log(error);
                            ctx.addIssue({
                                path: [...path, key],
                                message: error?.message?.toString(),
                                code: 'custom',
                            });
                        }
                        if (typeof error === 'object' && error !== null && !error.type) {
                            checkNestedErrors(error as FieldErrors, [...path, key]);
                        }
                    });
                };

                checkNestedErrors(form.formState.errors);
            })
        ),
        values,
    });

[Amansaxena001]

This is one case but consider multiple custom validations that depends upon business logic we cant write all of them here. We would need a scalable mech where we can easily write custom validations that runs in sync with zod resolver