Form validation TypeScript helper for React

Add to a project

Requirements: React 19, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Form validation is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import createValidators from @/lib/form-validation.

import { z } from "zod"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { createValidators, fieldError, useZodForm } from "@/lib/form-validation"

// English messages by default; pass VALIDATION_MESSAGES_RO for the Romanian set
const v = createValidators()
const schema = z.object({ email: v.email(), cui: v.cui({ required: false }) })

export function CompanyForm({ onSave }: { onSave: (values: z.output<typeof schema>) => Promise<void> }) {
  const form = useZodForm(schema, { defaultValues: { email: "", cui: "" } })
  return (
    <form onSubmit={form.handleSubmit(onSave)} noValidate className="flex flex-col gap-4">
      <Input label="Email" type="email" autoComplete="email" {...form.register("email")} error={fieldError(form, "email")} />
      <Input label="Tax ID (CUI)" {...form.register("cui")} error={fieldError(form, "cui")} />
      <Button type="submit" loading={form.formState.isSubmitting}>Save</Button>
    </form>
  )
}

API

• messagesdefault "en"
  "ro" | "en"

  Demo only: which message set the validators use (the English defaults or VALIDATION_MESSAGES_RO).

• minLengthdefault 8
  number

  v.password({ minLength }): the shortest password accepted.

• minScoredefault 2
  number

  v.password({ score: scorePassword, minScore }): the weakest strength accepted (0 skips the check, 4 is Strong).

• createValidators
  (messages?: Partial<ValidationMessages>) => Validators

  Zod schemas sharing one message set: text({ required, min, max }), name(), email(), password({ minLength, score, minScore }), phone({ country }), cui(), iban(), postalCode(), url(), otp(length), accept() (a ticked checkbox), number({ min, max }). Every field rule takes { required } and accepts "" when optional. v.messages is the merged set.

• withMatch
  (schema: ZodObject, field: string, confirmField: string, message?: string) => ZodType

  Adds "confirmField must equal field" to an object schema, reported on the confirm field (password and its confirmation).

• useZodForm
  (schema: ZodType, options?: UseFormProps) => UseFormReturn

  useForm with the zod resolver and the library's timing: mode onTouched (an error appears once a field is left), then it updates as you type. Input and output types come from the schema.

• fieldError
  (form: UseFormReturn, name: string) => string | undefined

  The error message of a field (dotted paths work), ready for a component's error prop: error={fieldError(form, "email")}.

• simulateRequest
  <T>(ms?: number, options?: { fail?: string; value?: T; signal?: AbortSignal }) => Promise<T>

  A pretend request for demos and default handlers: resolves after ms (default 900), or rejects with fail as the message.

• DEFAULT_VALIDATION_MESSAGES
  ValidationMessages

  The English default messages createValidators merges yours over. Counted messages are functions: tooShort(min), otp(length).

• VALIDATION_MESSAGES_RO
  ValidationMessages

  The ready Romanian message set: pass it to createValidators for Romanian errors.

FAQ

Used in

More React hooks and utilities