Blog

React Hook Form + Zod: Modern Form Validasyonu

Formlar, web sitelerinizde ve uygulamalarınızda kullanıcı verilerini toplamanıza olanak tanır. Form doğrulama, kullanıcıdan alınan verilerin eksiksiz, doğru ve beklenen formata uygun olmasını sağlar. Hatalı veya eksik verilerin sistemde yer almasını engelleyerek veri tutarlılığı ve güvenlik açısından kritik bir rol oynar.

Ayrıca, kullanıcıya anlık geri bildirim sunarak daha iyi bir kullanıcı deneyimi oluşturur. Bu yazıda, React Hook Form ve Zod kullanarak nasıl güçlü ve tip güvenli form doğrulama mekanizmaları kurabileceğimizi inceleyeceğiz.

🔹 Zod Nedir ve Neden Tercih Edilir?

Zod, TypeScript-first bir şema doğrulama kütüphanesidir. Hem compile-time hem de runtime doğrulama sunar ve tanımlanan şemalardan doğrudan TypeScript türleri üretir. Bu sayede tekrar eden tip tanımlarını ortadan kaldırır.

Minimalist ve zincirlenebilir API yapısıyla okunabilirliği yüksek, büyük ölçekli projelerde kullanıma uygundur. TypeScript gerektirmeden JavaScript projelerinde de çalışabilir.

React projelerinde, Zod genellikle react-hook-form ile birlikte kullanılır. zodResolver sayesinde tanımlanan şemalar doğrudan form doğrulaması için entegre edilebilir ve form doğruluğu güvenli bir şekilde sağlanır.

Zod şemaları: Şemalar, bir veri nesnesinin sahip olması gereken yapı ve kuralları tanımlar. Zod'daki tüm doğrulama işlemleri bu şemalar üzerinden gerçekleştirilir. Örneğin, formSchema kullanılarak geçerli bir kullanıcı verisinin hangi alanlara sahip olması gerektiği ve bu alanların özellikleri net bir şekilde belirlenebilir.

// validation.ts
import * as z from 'zod';

const stringSchema = z.string(); // Validates a string
const numberSchema = z.number(); // Validates a number
const booleanSchema = z.boolean(); // Validates a boolean
const dateSchema = z.date(); // Validates a date
// ...

Zod kullanımı: z.instanceof, refine, min, max ve optional

import * as z from 'zod';

export const formSchema = z.object({
  fullName: z.string().min(3, "Full name must be at least 3 characters long."),
  email: z.string().email("Please enter a valid email address."),
  phoneNumber: z.string().min(10, "Phone number must be at least 10 digits long.").max(15, "Phone number can be at most 15 digits long."),
  startDate: z.date().optional(),
  resume: z.instanceof(File).refine(file => file.type === "application/pdf", "Only PDF files are allowed."),
  acceptTerms: z.boolean().refine(val => val === true, "You must accept the terms and conditions."),
});
  • z.instanceof(): Belirli bir türün örneği olup olmadığını doğrular, genellikle nesnelerin türünü kontrol etmek için kullanılır.
  • refine(): Özelleştirilmiş doğrulama kuralları ekler. Varsayılan doğrulama yetersizse, özel koşullar tanımlanabilir ve hata mesajları sağlanabilir.
  • min() ve max(): Sayılar ve dizeler için minimum ve maksimum sınır belirler. min() değerin bir alt sınırdan küçük olmamasını, max() ise üst sınırı aşmamasını sağlar.
  • optional(): Bir alanın isteğe bağlı olduğunu belirtir, kullanıcı bu alanı doldurmazsa hata verilmez.

Zod, her doğrulama kuralı için özelleştirilmiş hata mesajları sağlar, bu da kullanıcıya hatalı girişlerde açık geri bildirim sunar.

🔁 Zod & React Hook Form Entegrasyonu

React Hook Form, form durumunu yönetmek için hafif ve performans odaklı bir çözümdür. Zod ise güçlü doğrulama kuralları tanımlamak için kullanılır. Bu iki araç birlikte kullanıldığında, hem form yönetimi hem de doğrulama süreci oldukça verimli hâle gelir.

@hookform/resolvers paketi üzerinden gelen zodResolver, Zod şemasını React Hook Form ile entegre etmemizi sağlar. Böylece form gönderiminde otomatik doğrulama yapılır ve kullanıcıya anında geri bildirim verilir.

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { formSchema } from "@/lib/validation";
import { z } from "zod";

type PersonalInfoFormData = z.infer<typeof formSchema>;

TypeScript tür çıkarımı: type PersonalInfoFormData = z.infer<typeof formSchema> satırı, Zod şemasından doğrudan bir TypeScript tipi türetir. Böylece şema ile uyumlu ve tekrar eden tanımlamalara gerek kalmadan güçlü bir tip kontrolü elde edilir.

interface PersonalInfoProps {
  onStepSubmit: (data: PersonalInfoFormData) => void;
  onBack: () => void;
}

export default function PersonalInfoPage({ onStepSubmit }: PersonalInfoProps) {
  const form = useForm<PersonalInfoFormData>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      fullName: "",
      email: "",
      phoneNumber: "",
      // Add other fields as needed
    },
  });

useForm<PersonalInfoFormData> ifadesi, formun TypeScript tip güvenliğini sağlamak için Zod şemasından türetilmiş olan PersonalInfoFormData tipini kullanır. Bu sayede form verileri üzerinde hem derleme zamanında hem de çalışma zamanında kontrol sağlanmış olur.

resolver: zodResolver(formSchema) ile Zod şeması, React Hook Form'a entegre edilir. Bu yapı, form alanlarına girilen verilerin Zod kurallarına göre otomatik olarak doğrulanmasını sağlar.

defaultValues ise form alanlarının başlangıçta hangi değerlerle yükleneceğini belirler. Bu, hem varsayılan değerleri yönetmek hem de controlled input yapısını desteklemek için önemlidir.

🧠 Form Elemanı Oluşturun

<Form {...form}>
  <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
    <FormField
      control={form.control}
      name="fullName"
      render={({ field }) => (
        <FormItem>
          <FormLabel>Full Name</FormLabel>
          <FormControl>
            <Input placeholder="Full Name" {...field} />
          </FormControl>
          <FormMessage />
        </FormItem>
      )}
    />
    {/* ... */}

Her bir form alanı, React Hook Form'un useForm hook'u ve FormField bileşenleriyle kontrol edilir. Form elemanları, Zod şemasıyla doğrulama kuralları belirlenerek, form gönderildiğinde kullanıcıya geri bildirim sağlanır. Zod doğrulaması sayesinde, her bir form elemanı için beklenen veri tipleri, minimum ve maksimum uzunluklar, zorunlu alanlar gibi kısıtlamalar sağlanır.

Bu yapı, form verilerinin doğru bir şekilde yönetilmesini, kullanıcıya açık geri bildirimler sunulmasını sağlar ve React Hook Form ile Zod'un sunduğu tip güvenliğini kullanarak daha güvenli ve verimli bir form doğrulama deneyimi oluşturur.

🚀 Sonuç

Zod ve React Hook Form kombinasyonu, form doğrulama ve yönetimi için güçlü ve kullanıcı dostu bir çözüm sunar. Bu yazıda, Zod'un sunduğu şema doğrulama özelliklerini, React Hook Form ile nasıl entegre edilebileceğini ve veri doğrulama sürecini daha verimli hale getirecek çeşitli yöntemleri ele aldık.

Eğer bu konuları daha detaylı bir şekilde keşfetmek isterseniz, Zod ve React Hook Form kullanarak geliştirdiğim Multi-Step Form projemi inceleyebilirsiniz.

Bu kombinasyon, projelerinizde veri doğrulama sürecini basitleştirirken, aynı zamanda kullanıcı deneyimini geliştirir. Umarım bu yazı, sizlere Zod ve React Hook Form'u kullanma konusunda yardımcı olmuştur!

Keyifli kodlamalar 👨‍💻 🎉

Bu yazı ilk olarak Medium'da yayınlandı.