issue: invalid: it does not work within nested objects.

[Gaia-Yang]

Version Number

7.47.0

Codesandbox/Expo snack

N/A

Steps to reproduce

1. setting zod (nested object)
2. use zodResolver
3. use tailwindcss invalid:

<input
          {...register("receiver.fullName")}
          type="text"
          placeholder="fullName"
          className="input focus:input-primary input-bordered invalid:input-error"
        />

Expected behaviour

I use NextJs, tailwindcss, daisyui

form config:

import { zodResolver } from "@hookform/resolvers/zod";
import isMobilePhone from "validator/lib/isMobilePhone";
import z from "zod";

export const orderReceiverSchema = z
  .object({
    fullName: z.string().min(1, { message: "請輸入姓名" }),
    mobile: z
      .string()
      .min(1, { message: "請輸入手機號碼" })
      .refine((v) => isMobilePhone(v, "zh-TW"), { message: "手機格式錯誤" }),
    address: orderReceiverAddressSchema,
  })
  .optional();

export const orderSchema = z.object({
  receiver: orderReceiverSchema,
});

export type OrderSchema = z.infer<typeof orderSchema>;

export const defaultValues: OrderSchema = {
  receiver: {
    fullName: "",
    mobile: "",
    address: {
      zipcode: "",
      division: "",
      subdivision: "",
      address: "",
    },
  },
};

export const resolver = zodResolver(orderSchema);

component:

import { type OrderSchema, defaultValues, resolver } from "@/form/order";

function Test() {
  const form = useForm<OrderSchema>({
    defaultValues,
    resolver,
    shouldUseNativeValidation: true,
  });
return <div className="form-control">
        <label className="label" htmlFor="receiver.fullName">
          <span className="label-text">姓名</span>
        </label>
        <input
          id="receiver.fullName"
          {...register("receiver.fullName")}
          type="text"
          placeholder="姓名"
          className="input focus:input-primary input-bordered invalid:input-error"
        />
      </div>
}

The invalid:input-error should be applied when the receiver.fullName parameter is not regular.
But it only focuses on input, no invalid: style, no html input ui error message.

import { zodResolver } from "@hookform/resolvers/zod";
import isMobilePhone from "validator/lib/isMobilePhone";
import z from "zod";

export const orderReceiverSchema = z
  .object({
    fullName: z.string().min(1, { message: "請輸入姓名" }),
    mobile: z
      .string()
      .min(1, { message: "請輸入手機號碼" })
      .refine((v) => isMobilePhone(v, "zh-TW"), { message: "手機格式錯誤" }),
    address: orderReceiverAddressSchema,
  })
  .optional();

export const orderSchema = orderReceiverSchema

export type OrderSchema = z.infer<typeof orderSchema>;

export const defaultValues: OrderSchema = {
  fullName: "",
    mobile: "",
    address: {
      zipcode: "",
      division: "",
      subdivision: "",
      address: "",
    },
};

export const resolver = zodResolver(orderSchema);

If only one layer of objects, 'fullName' and 'mobile' invalid: are work, all fields within the 'address' object invalid: are not work

What browsers are you seeing the problem on?

Firefox, Chrome, Safari

Relevant log output

No response

Code of Conduct

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