React hook form and zod inumber input

I have created a form with react hook form and did a validation with zod. In one input I want to write in numbers, when I write any number, the error says it is not a number:

          render={({ field }) => (
              className="w-full px-3 py-2 border rounded-md"
 calories: z
      required_error: "Calories is required",
      invalid_type_error: "Calories must be a number",
    .min(1, { message: "Calories should be at least 1" }),

I am missing something?

Did not find any solution to this

>Solution :

When the input is of type number, it sends its value as a string even if the user inputs a number.
As a result, Zod sees the value as a string and considers it invalid for the number() validation.

I am not familiar with Zod but the idea here is that before applying the Zod validation, if you can, you’ll need to convert the input value to a number otherwise validate it as a string that should be a valid number have a look here

Leave a Reply