Input Number area shows red color and not able to submit a Form

[dwk601]

const schema = z.object({
  name: z.string().min(2).max(40),
  mainPosition: z.string(),
  mainRating: z
    .number({
      required_error: "Please enter a rating between 1-10",
      invalid_type_error: "Please enter a valid number",
    })
    .positive(),
  subPosition: z.string(),
  subRating: z
    .number({
      required_error: "Please enter a rating between 1-10",
      invalid_type_error: "Please enter a valid number",
    })
    .positive(),
  approved: z.boolean(),
});

export default function SetupPage() {
  const form = useForm<z.infer<typeof schema>>({
    resolver: zodResolver(schema),
    defaultValues: {
      name: "",
      mainPosition: "",
      subPosition: "",
      approved: false,
    },
  });

  function onsubmit(data: z.infer<typeof schema>) {
    toast({
      title: "You submitted the form",
      description: (
        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
        </pre>
      ),
    });
  }

<FormField
          control={form.control}
          name="mainRating"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Main Rating</FormLabel>
              <FormControl>
                <Input placeholder="1-10" {...field} />
              </FormControl>
            </FormItem>
          )}
        />

Every other field than main rating, and sub rating are seems working without any issue but the number area keep denying the form to be submitted.

[steyer-mika]

Hey, on the first look it seems like there's an issue with your form submission being prevented due to validation errors. But it's hard to say without more context.

When you encounter red validation indicating that the input is invalid, it's advisable to double-check your Zod validation rules and ensure they match the intended criteria.

Here are some steps that might be helpful:

1. Zod Validation Rules: Make sure your Zod validation rules for the fields are correctly defined.

2. React Hook State: Double-check the actual value stored in the React hook state for these fields. You can check with the getValues() or watch() method or simply by checking the formState.invalid. ->React Hook From Docu

[imopbuilder]

@dwk601

If you want to use input element with type='number' then the zod validator is used as shown in the issue https://github.com/shadcn-ui/ui/issues/421#issuecomment-1890398977

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.