REACT İLE FORM VALİDASYONU YAPMAK VE HATA MESAJI KURGULAMAK

Formlar, web uygulamalarının en kritik etkileşim noktalarından biridir. Üyelik, giriş, teklif talebi veya ödeme adımı fark etmeksizin; hatalı kurgulanmış bir form validasyonu süreci, kullanıcıyı hızla kaybetmenize neden olabilir. Bu nedenle React ile form validasyonu yapmak, yalnızca teknik bir gereklilik değil aynı zamanda stratejik bir deneyim tasarımı konusudur.

Birçok projede validasyon sadece “zorunlu alan” kontrolünden ibaret sanılır. Oysa gerçek ihtiyaç; doğru zamanda, doğru mesajla, doğru kullanıcı yönlendirmesini yapmaktır. Hata mesajı kurgusu, dönüşüm oranını doğrudan etkileyen bir faktördür.

Bu yazıda React form yönetimi, controlled input yapısı, anlık doğrulama, submit sonrası kontrol, hata mesajı tasarımı ve performans optimizasyonu konularını detaylı şekilde ele alacağız. Konuyu daha sistematik öğrenmek için react eğitimi içeriklerine de göz atabilirsiniz.

Form validasyonu mantığını doğru konumlandırmak

React projelerinde form validasyonu iki ana yaklaşımla ele alınır: anlık doğrulama (onChange) ve submit sonrası doğrulama. Doğru yaklaşım, formun amacına göre belirlenmelidir.

Anlık doğrulama yapmak ve kullanıcıyı yönlendirmek

Kullanıcı yazarken e-posta formatını kontrol etmek gibi anlık validasyonlar, hatayı erken aşamada yakalar. Ancak aşırı agresif validasyon, kullanıcıyı rahatsız edebilir. Bu nedenle denge kurmak önemlidir.

Submit sonrası kontrol etmek ve veri bütünlüğünü sağlamak

Bazı formlarda, tüm alanlar doldurulduktan sonra toplu kontrol yapmak daha sağlıklıdır. Özellikle çok adımlı formlarda bu yaklaşım daha akıcı bir deneyim sunar.

Controlled component yapısını kurmak ve state yönetmek

React’te form alanları genellikle controlled component olarak tasarlanır. Input değeri state’te tutulur ve değişimlerde güncellenir. Bu yapı, validasyon kontrolünü merkezi hale getirir.

Input state modelini sadeleştirmek ve ölçeklemek

Her input için ayrı state tanımlamak yerine, tek bir formState objesi kullanmak daha ölçeklenebilir bir çözümdür.

import { useState } from "react";

function RegisterForm() {
  const [formData, setFormData] = useState({
    email: "",
    password: ""
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  return (
    <input 
      name="email"
      value={formData.email}
      onChange={handleChange}
    />
  );
}

Hata state yapısını tasarlamak ve merkezi kontrol etmek

FormData yanında bir errorState objesi tutmak, hata mesajlarını alan bazlı yönetmeyi kolaylaştırır. Böylece her alanın hata durumu net şekilde izlenir.

Validasyon kuralları tanımlamak ve tekrar kullanılabilir hale getirmek

Validasyon kuralları doğrudan bileşen içine yazılabilir; ancak büyük projelerde bu yaklaşım karmaşa yaratır. Bunun yerine ayrı bir doğrulama fonksiyonu tasarlamak daha sürdürülebilir bir yöntemdir.

Merkezi validate fonksiyonu oluşturmak ve genişletmek

function validate(values) {
  const errors = {};

  if (!values.email) {
    errors.email = "E-posta alanı zorunludur.";
  } else if (!/\S+@\S+\.\S+/.test(values.email)) {
    errors.email = "Geçerli bir e-posta adresi giriniz.";
  }

  if (values.password.length < 6) {
    errors.password = "Şifre en az 6 karakter olmalıdır.";
  }

  return errors;
}

Bu yapı sayesinde validasyon mantığı bileşenden ayrılır ve test edilebilir hale gelir. Tekrar kullanılabilir validasyon yaklaşımı, ekip içinde standart oluşturmayı kolaylaştırır.

Regex kullanmak ve format doğrulamasını netleştirmek

E-posta, telefon veya TC kimlik gibi alanlarda regex ile format kontrolü yapılabilir. Ancak karmaşık regex ifadeleri yerine okunabilir yapılar tercih edilmelidir.

Hata mesajı kurgulamak ve kullanıcı deneyimini iyileştirmek

Form validasyonunun en görünür kısmı hata mesajıdır. Yanlış mesaj dili, teknik jargon veya suçlayıcı ifadeler kullanıcıyı uzaklaştırır. Hata mesajı tasarlamak, teknik kadar iletişimsel bir konudur.

Net ve yönlendirici mesaj yazmak ve çözüm sunmak

“Geçersiz giriş” yerine “Şifre en az 6 karakter olmalıdır” gibi açıklayıcı mesajlar tercih edilmelidir. Ne yanlış? ve nasıl düzeltilir? sorularına cevap vermek gerekir.

Alan bazlı gösterim yapmak ve dikkat dağıtmamak

Hataları formun en üstünde listelemek yerine ilgili input altında göstermek daha etkilidir. Ayrıca kırmızı kenarlık, ikon veya küçük bir açıklama metniyle görsel hiyerarşi kurulabilir.

Kütüphane kullanmak ve performansı optimize etmek

Büyük formlarda manuel state yönetimi karmaşık hale gelebilir. Bu noktada React Hook Form veya Formik gibi kütüphaneler tercih edilebilir. Ancak kütüphane seçimi proje ölçeğine göre yapılmalıdır.

React Hook Form kullanmak ve re-render azaltmak

React Hook Form, uncontrolled input yaklaşımıyla daha az render üretir. Özellikle büyük ve dinamik formlarda performans avantajı sağlar.

Yup ile şema tabanlı doğrulama yapmak ve standartlaştırmak

Yup gibi şema tabanlı doğrulama araçları, validasyon kurallarını merkezi ve okunabilir hale getirir. Böylece ekip içinde ortak doğrulama standardı oluşur.

Validasyon performansını ölçmek ve hataları azaltmak

Her input değişiminde ağır validasyon çalıştırmak performans sorununa yol açabilir. Debounce kullanmak veya sadece gerekli alanlarda kontrol yapmak daha verimli bir yaklaşımdır.

• Her değişimde tüm formu kontrol etmemek
• Gereksiz state güncellemelerini azaltmak
• Memoization ile alt bileşenleri optimize etmek
• Submit öncesi son kontrol mekanizması kurmak

Sonuç olarak, React ile form validasyonu yapmak; sadece teknik kontrol değil, aynı zamanda deneyim tasarımıdır. Doğru validasyon kurgusu, hatalı veri girişini azaltır, kullanıcı güvenini artırır ve dönüşüm oranlarını iyileştirir. Ölçeklenebilir state modeli, net hata mesajı stratejisi ve performans odaklı yaklaşım; sürdürülebilir React projelerinin temel yapı taşlarıdır.