Next.js Discord

Discord Forum

Don't want decimal numbers in form input to get accepted

Answered
QBit posted this in #help-forum
Open in Discord
Avatar
QBitOP
Form should not accept decimal nos.
For <=0 numbers code is written to not accept them. Now it accepting positive decimal also but I don't want. What to do?
"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { useRouter } from "next/navigation"

import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"

const FormSchema = z.object({
  ID: z
    .string()
    .min(1, { message: "Problem ID must be at least 1 character" })
    .refine((value) => parseInt(value) > 0, {
      message: "ID must be greater than zero",
    }),
})

export function ProblemIDForm() {
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      ID: undefined,
    },
  })

  const router = useRouter()
  function onSubmit(values: z.infer<typeof FormSchema>) {
    // console.log(values)
    router.push(`/problems/${values.ID}`)
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
        <FormField
          control={form.control}
          name="ID"
          render={({ field }) => (
            <FormItem>
              <FormLabel className="flex justify-center">Problem ID</FormLabel>
              <FormControl>
                <Input type="number" placeholder="Enter ID here" {...field} />
              </FormControl>
              <FormDescription>LeetCode problem ID</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <div className="flex justify-center">
          <Button type="submit">Submit</Button>
        </div>
      </form>
    </Form>
  )
}
Answered by Alfonsus Ardani
try
z.coerce.number().int().positive().finite()
View full answer

14 Replies

Avatar
Alfonsus Ardani
what do you want the value to be?
positive nonnegative integers?
Avatar
joulev
Number.isInteger() to check if a number is an integer
Avatar
joulev
Ackshually, zod has native methods for this
z.number().int().positive().finite() is probably what you need
Avatar
QBitOP
when I changed the zod FormSchema to this @joulev
const FormSchema = z.object({
  // ID: z
  //   .string()
  //   .min(1, { message: "Problem ID must be at least 1 character" })
  //   .refine((value) => parseInt(value) > 0, {
  //     message: "ID must be greater than zero",
  //   }),
  ID: z.number().int().positive().finite(),
})

Now the integer is not getting accepted
I think my z.number() is not working. Something maybe mismatched
Image
I want to accept only natural numbers 1, 2, 3,....
I don't want 23.45, 38.6, .... such decimal numbers
currently form is accepting pos decimal also
Avatar
Alfonsus Ardani
you need to transform the output into number first
Avatar
Alfonsus Ardani
try
z.coerce.number().int().positive().finite()
Answer
Avatar
QBitOP
working!!
Image
thanks!!
Avatar
Alfonsus Ardani
Glad it worked!