Paths/Frontend Engineer/Forms & Validation / Client-Side Validation
Write the Form Schema
The schema is the single description of what the form accepts, shared by the interface and the server. Write it.
Validator
IDLE — checks run live as you type commands; submit when done
01Requirements
live checks- Directory ~/app/forms exists○
- File ~/app/forms/schema.ts exists○
- The schema declares the fields and their types○
- The schema states the validation rules○
02Walkthrough
4 steps- 01
Create the forms directory
Form code belongs together, away from the page that renders it.
mkdir -p ~/app/forms - 02
Write the schema
z.object describes the shape, and each field carries its own rule. The type comes from the schema, never from a cast.
echo 'import { z } from "zod";\n\nexport const checkoutSchema = z.object({\n email: z.string().email(),\n quantity: z.number().int().min(1).max(10),\n notes: z.string().max(500).optional(),\n});' > ~/app/forms/schema.ts - 03
Add the inferred type
Infer the type from the schema, so the form and the type can never drift apart.
echo '\nexport type CheckoutForm = z.infer<typeof checkoutSchema>;' >> ~/app/forms/schema.ts - 04
Verify and submit
cat the schema, then submit for validation.
cat ~/app/forms/schema.ts
03Stuck?
0 of 3 revealedTake a hint without losing the lab — each one points at the thing to look at, not at the answer.
04AI Tutor
guides, never solvesTell me what you're stuck on — I'll nudge, not solve. Which requirement are you looking at?
04Notebook
saved locally in this browserlearner@lab — ubuntu:24.04
Session is disposable
↑/↓ recalls commands · Ctrl+Enter submits · type help for the command list