When using Zod for validating react-hook-form fields, I constantly encounter the default error message "Expected array, received null". Is there a way to customize this error message in a more user-friendly manner? Below is an example of how to set a custom message for this specific scenario within the promos
field, along with the corresponding output when submitting the form without making any selections in the "checkbox" array field.
Code:
promotion: z.object({
id: z.string().optional(),
name: z.string({
required_error: "A name is required.",
invalid_type_error: "A name is required.",
}).min(1, "A name is required.").max(150, "The name must be less than 150 characters."),
email: z.string({
required_error: "An email is required.",
invalid_type_error: "This is an invalid email.",
}).email().min(1, "An email is required."),
promos: z.array(z.string({
required_error: "A promotion selection is required.",
invalid_type_error: "This is an invalid promotion selection",
}).min(1, "A promotion selection is required.")).min(1, "At least one promotion selection is required."),
}),
Output: