gem-hunter
Language: TypeScript
implement advanced form validation using Zod & RHF
A modern Next.js registration form demonstrating advanced form validation using React Hook Form (RHF) with Zod schema validation. Features real-time password strength indicators, comprehensive validation rules, and a beautiful UI built with shadcn/ui and Tailwind CSS.
This project showcases a production-ready registration form with:
To install Bun (if not already installed):
curl -fsSL https://bun.sh/install | bashgit clone <repository-url> cd rhf-zod
bun install
Start the development server:
bun dev
Open http://localhost:3000 in your browser to see the application.
The page auto-updates as you edit files.
rhf-zod/
├── app/
│ ├── zod/
│ │ ├── schema/
│ │ │ └── formSchema.ts # Zod validation schema with password rules
│ │ ├── page.tsx # Registration form with Zod validation
│ │ └── ValidationTemplate.tsx # Password strength indicator component
│ ├── globals.css # Global Tailwind styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page with RHF native validation
├── components/
│ └── ui/ # shadcn/ui components
│ ├── button.tsx
│ ├── input.tsx
│ └── label.tsx
├── lib/
│ └── utils.ts # Utility functions (cn helper)
└── config files # TypeScript, ESLint, Next.js, Tailwind
The form uses a comprehensive Zod schema for validation:
const formSchema = z .object({ username: z.string().min(1).max(20), email: z.string().email(), password: z .string() .min(12) .max(25) .refine((val) => /[A-Z]/.test(val), "Must include uppercase") .refine((val) => /[a-z]/.test(val), "Must include lowercase") .refine((val) => /[0-9]/.test(val), "Must include number") .refine((val) => /[^A-Za-z0-9]/.test(val), "Must include special char"), confirmPassword: z.string(), }) .refine((data) => data.password === data.confirmPassword, { message: "Passwords do not match", path: ["confirmPassword"], });
aria-invalid attributesThis project is open source and available under the MIT License.
Contributions, issues, and feature requests are welcome!