issue: Zod refine error with objects

[joel-daros]

Version Number

7.52.1

Codesandbox/Expo snack

https://stackblitz.com/edit/vitejs-vite-a9bup4?file=src%2FApp.tsx

Steps to reproduce

I’m trying to validate if the min value is greater than the max value using Zod with a refine method.

But even when the min/max received invalid values (min: 99, max: 1) the RHF doesn’t fill the error object with error defined in the Zod refine method. The isValid property is set correctly to false.

Notice that the refine() error is working fine for the field name if I type something different then abc.

The issue seems related when I have fields min and max defined inside an object area.

Using the Codesanbox from this topic:

1. Type abc in the name field.
2. Type 99 for the min field.
3. Type 1 for the max field.
4. No error is displayed. error object is empty.

Expected behaviour

error object should contain the error message defined in the refine() zod method.

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

[jeknom]

I've stumbled upon this same issue. In my case, I'm using superRefine from Zod. It should be the same thing under the hood as refine. I can also see that the validation is being run and the error is in the validation result, but it's just not set to the errors object by RHF for some reason. This can be seen by debugging the resolver:

const form = useForm({
		resolver: async (data, context, options) => {
			const result = await zodResolver(schema)(data, context, options)
			console.log(result)

			return await zodResolver(schema)(data, context, options)
		},
		defaultValues,
		mode: 'onChange',
		reValidateMode: 'onChange',
	})

[bluebill1049]

Could you run this code snippet to check out the root cause?

resolver: async (data, context, options) => {
  // you can debug your validation schema here
  console.log("formData", data)
  console.log(
    "validation result",
    await anyResolver(schema)(data, context, options)
  )
  return anyResolver(schema)(data, context, options)
}

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

[joel-daros]

These are the returns:

formdata
{
    "name": "abc",
    "area": {
        "min": 123,
        "max": 1
    }
}

false was returned

validation result
{
    "values": {},
    "errors": {
        "area": {
            "area": {
                "message": "Min value must be less than or equal to max value",
                "type": "custom"
            }
        }
    }
}

I think the issue can be related to how the errors object is created. It’s adding an additional area object with the message.
Is this expected?

[vlanemcev]

I have the same problem!

Do you resolved this issue?
@joel-daros

[joel-daros]

No I don’t. This is clearly a bug from RHF or from ZodResolver that must be fixed.

[veymarmc]

I have the same problem!

Do you resolved this issue? @joel-daros

As a work around I'm using the triger function when editing something of the object, the triger function does modify the errors object.

[vlanemcev]

@bluebill1049

Please, reopen this issue, because looks like it's bug.

[vlanemcev]

I have the same issue, but with superRefine - RHF is adding an additional object with the message inside error of my field.
I've tested it on latest version of RHF

[AliceYuuuuuu]

+1, having the same issue :/

[jeknom]

I validated that this issue can no longer be reproduced in v4.0.0 of the @hookform/resolvers package. Seems it has been fixed.

Here's my repro: https://github.com/jeknom/react-hook-form-zod-refine-issue-repro

[veymarmc]

I have the same issue and tested with the last updated packages at this time(RHF v7.55.0 and resolvers v5.0.0), sadly for some reason the error object is not being updated while the schema refine function is working well.
As a work around I'm using the triger function when editing something of the object, the triger function does modify the errors object.

[nfmshow]

I'm still experiencing this issue, React hook form v7.61.1, @hookform/resolvers v5.2.1

[seegg]

Path in refine refers a path inside the parent object so when you specify path:['area'] RFH attaches the error to area.area. From a bit of testing, you can attach the error to the object you're refining by specifying an empty string as the path path: [''].