React 18

Schema Based Validation

• Popular libraries
  • Joi
  • Yup
  • Zod
• Install zod

npm i zod@3.20.6

• Import

import {z} from "zod";

• Define schema

const schema = z.object({
	name: z.string().min(3, {message: "Name must be at least 3 chars"}),
	age: z.number({invalid_type_error: "Age is required"}).min(18, {message: "Age must be at least 18"})
})

• Define interface

type FormData = z.infer<typeof schema>;

• Install resolver

npm i @hookform/resolvers@2.9.11

• Import resolver

import {zodResolver} from "@hookform/resolvers/zod";

• Pass schema to react hook form using zod resolver

useForm<FormData>({resolver: zodResolver(schema)});

• Register control

register("name")	
register("age", {valueAsNumber: true})	

• Error handling

{errors.name && <p>{errors.name.message}</p> }