Kembali ke Blog
TypeScriptZod

Validasi Form Type-Safe dengan Zod dan TypeScript

Satu schema Zod untuk validasi client dan server sekaligus: menghilangkan duplikasi, mencegah drift, dan mendapatkan type inference gratis di seluruh alur form.

5 Maret 20265 menit baca

Validasi form adalah salah satu area paling rawan duplikasi: aturan yang sama ditulis dua kali — di client untuk UX, di server untuk keamanan — lalu keduanya perlahan tidak sinkron. Zod menyelesaikan ini dengan satu sumber kebenaran.

Satu Schema, Dua Tempat

Definisikan schema di file terpisah yang bisa diimpor baik oleh komponen client maupun API route. Client memakainya untuk feedback instan sebelum submit; server memvalidasi ulang payload yang sama sebagai trust boundary — karena request bisa datang dari mana saja, bukan hanya dari form Anda.

Type Inference Gratis

Dengan z.infer, tipe TypeScript dihasilkan langsung dari schema. Tambahkan satu field di schema, dan compiler akan menunjukkan setiap tempat yang perlu diperbarui. Tidak ada lagi interface yang tertinggal dari aturan validasinya.

Pola yang Saya Pakai di Form Kontak

  • Schema Zod mendefinisikan aturan: nama minimal 2 karakter, email valid, pesan minimal 20 karakter
  • API route memanggil safeParse dan mengembalikan error 400 dengan detail field ketika gagal
  • Client menampilkan error per-field dari respons yang sama
  • Rate limiting dan sanitasi tetap di server — validasi bukan pengganti keamanan

Kesalahan Umum

Jangan validasi hanya di client — itu UX, bukan keamanan. Jangan pula membuat schema berbeda untuk client dan server; seluruh nilai Zod justru hilang ketika aturannya bercabang. Dan gunakan safeParse alih-alih parse di server agar error tervalidasi menjadi respons yang terkontrol, bukan exception.

Hasil akhirnya: form yang aman, DX yang menyenangkan, dan satu tempat untuk mengubah aturan validasi.