Forms & Zod Validation

Belajar cara menangani form secara modern dengan validasi yang kuat menggunakan Zod.

1. Zod Schema Definition

Zod memungkinkan kita mendefinisikan skema data yang bisa divalidasi baik di Client maupun Server.

lib/schema.ts

import { z } from "zod";

export const UserSchema = z.object({
  username: z.string().min(3, "Minimal 3 karakter"),
  email: z.string().email("Format email tidak valid"),
  age: z.number().min(18, "Minimal usia 18 tahun"),
});

export type User = z.infer<typeof UserSchema>;

Interactive Demo: Real-time Validation

Coba ketik sesuatu untuk melihat bagaimana Zod memvalidasi input Anda secara langsung.

Username

Validation Logic

z.string().min(3)

Status: Empty

Schema Power

Zod tidak hanya memvalidasi, tapi juga memberikan Inferred Types yang membuat development lebih cepat tanpa perlu menulis interface manual.

Quick Start:

npm install zod @hookform/resolvers react-hook-form

2. React Hook Form Integration

Next.js 15 seringkali menggunakan React Hook Form bersama Zod resolver untuk pengalaman terbaik.

components/my-form.tsx

"use client";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { UserSchema, User } from "@/lib/schema";

export function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm<User>({
    resolver: zodResolver(UserSchema)
  });

  const onSubmit = (data: User) => {
    console.log("Valid Data:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("username")} />
      {errors.username && <span>{errors.username.message}</span>}
      
      <button type="submit">Submit</button>
    </form>
  );
}

Server-Side Validation

Jangan hanya memvalidasi di Client! Gunakan skema Zod yang sama di Server Action untuk memastikan data yang masuk ke database tetap bersih dan aman.

Fundamentals

Advanced Patterns