React Academy · Lesson

Schema Validation with Zod

Integrate @hookform/resolvers and Zod schemas for type-safe form validation.

Schema Validation with Zod is a free React Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will integrate React Hook Form with Zod schemas via @hookform/resolvers to get type-safe validation with a single source of truth for both form and TypeScript types.

Why Schema Validation?

Defining validation rules inline in register() becomes verbose and hard to reuse. A Zod schema defines ALL validation in one place, infers TypeScript types automatically, and can be shared between the frontend and backend.

Installation

Install Zod and the RHF resolver package.

npm install zod @hookform/resolvers

Defining a Zod Schema

Use z.object() to define your form shape. Each field uses a Zod type with chained validation methods.

import { z } from 'zod';

const loginSchema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'At least 8 characters'),
});

Inferring TypeScript Types

Use z.infer to derive the TypeScript type from your Zod schema automatically. No separate interface needed.

type LoginForm = z.infer<typeof loginSchema>;
// { email: string; password: string }

Connecting to useForm via resolver

Pass zodResolver(schema) to useForm's resolver option. RHF will use Zod to validate the form instead of inline rules.

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

const { register, handleSubmit, formState } = useForm<LoginForm>({
  resolver: zodResolver(loginSchema),
});

No More Inline Rules

With zodResolver, you no longer need to pass rules to register(). Just call register('fieldName') with no second argument. Zod handles all validation.

<input {...register('email')} />
{errors.email && <p>{errors.email.message}</p>}

Complex Zod Validations

Zod supports powerful validations: url(), uuid(), regex(), refine() for custom logic, and superRefine() for cross-field validation.

const schema = z.object({
  url: z.string().url('Must be a valid URL'),
  confirmPassword: z.string(),
}).refine(
  data => data.password === data.confirmPassword,
  { message: 'Passwords must match', path: ['confirmPassword'] }
);

Cross-Field Validation

Zod's refine() or superRefine() can access all field values, enabling cross-field rules like 'end date must be after start date'.

const schema = z.object({
  start: z.string(),
  end: z.string(),
}).refine(d => d.end > d.start, {
  message: 'End must be after start',
  path: ['end'],
});

Sharing Schemas with the Backend

In a full-stack TypeScript project, export the Zod schema from a shared module. Use it in both the React form AND your Node.js/Next.js API handler for consistent validation.

// shared/schemas.ts
export const loginSchema = z.object({ ... });

// frontend — import and use as resolver
// backend — import and call .parse() on request body

Quick Check

What is the main advantage of using z.infer for the form type in TypeScript?

Recap

Define a Zod schema, infer the TypeScript type with z.infer, pass zodResolver to useForm, and remove inline validation rules. Use refine() for cross-field validation and share schemas between frontend and backend.

Up Next

Next lesson: **Dynamic Fields with useFieldArray** — you will add, remove, and reorder dynamic form fields using the useFieldArray hook.

Frequently asked questions

Is the “Schema Validation with Zod” lesson free?

Yes — the full text of “Schema Validation with Zod” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Schema Validation with Zod”?

Integrate @hookform/resolvers and Zod schemas for type-safe form validation. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Schema Validation with Zod” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy