React useFormState Doğrulama Hattı: Çok Aşamalı Form Doğrulamada Uzmanlaşma

Sağlam doğrulamaya sahip karmaşık formlar oluşturmak, modern web geliştirmede sık karşılaşılan bir zorluktur. React'in useFormState hook'u, form durumunu ve doğrulamayı yönetmek için güçlü ve esnek bir yol sunarak, gelişmiş çok aşamalı doğrulama hatları oluşturmayı mümkün kılar. Bu kapsamlı kılavuz, temelleri anlamaktan gelişmiş asenkron doğrulama stratejilerini uygulamaya kadar size süreç boyunca yol gösterecektir.

Neden Çok Aşamalı Form Doğrulaması?

Geleneksel, tek aşamalı form doğrulaması, özellikle çok sayıda alan veya karmaşık bağımlılıklar içeren formlarla uğraşırken hantal ve verimsiz hale gelebilir. Çok aşamalı doğrulama şunları yapmanızı sağlar:

• Kullanıcı Deneyimini İyileştirin: Belirli form bölümlerinde anında geri bildirim sağlayarak, kullanıcıları tamamlama sürecinde daha etkili bir şekilde yönlendirin.
• Performansı Artırın: Özellikle büyük formlar için performansı optimize ederek, formun tamamında gereksiz doğrulama kontrollerinden kaçının.
• Kod Sürdürülebilirliğini Artırın: Doğrulama mantığını daha küçük, yönetilebilir birimlere ayırarak kodun anlaşılmasını, test edilmesini ve bakımını kolaylaştırın.

useFormState'i Anlamak

useFormState hook'u (genellikle react-use gibi kütüphanelerde veya özel uygulamalarda bulunur), form durumunu, doğrulama hatalarını ve gönderim işlemlerini yönetmek için bir yol sağlar. Temel işlevleri şunları içerir:

• Durum Yönetimi: Form alanlarının mevcut değerlerini saklar.
• Doğrulama: Form değerlerine karşı doğrulama kurallarını yürütür.
• Hata Takibi: Her alanla ilişkili doğrulama hatalarını takip eder.
• Gönderim İşlemleri: Formu göndermek ve gönderim sonucunu işlemek için mekanizmalar sağlar.

Temel Bir Doğrulama Hattı Oluşturma

İki aşamalı basit bir form örneğiyle başlayalım: kişisel bilgiler (ad, e-posta) ve adres bilgileri (sokak, şehir, ülke).

1. Adım: Form Durumunu Tanımlayın

İlk olarak, formumuzun tüm alanları kapsayan başlangıç durumunu tanımlarız:

const initialFormState = {
  firstName: '',
  lastName: '',
  email: '',
  street: '',
  city: '',
  country: '',
};

2. Adım: Doğrulama Kuralları Oluşturun

Ardından, doğrulama kurallarımızı tanımlarız. Bu örnek için, tüm alanların boş olmamasını ve e-postanın geçerli bir formatta olmasını zorunlu kılalım.

const validateField = (fieldName, value) => {
  if (!value) {
    return 'Bu alan zorunludur.';
  }

  if (fieldName === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
    return 'Geçersiz e-posta formatı.';
  }

  return null; // Hata yok
};

3. Adım: useFormState Hook'unu Uygulayın

Şimdi, doğrulama kurallarını (varsayımsal) bir useFormState hook'u kullanarak React bileşenimize entegre edelim:

import React, { useState } from 'react';

// react-use gibi özel bir uygulama veya kütüphane varsayılıyor
const useFormState = (initialState) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });

    // Daha iyi bir kullanıcı deneyimi için değişiklikte doğrula (isteğe bağlı)
    setErrors({ ...errors, [name]: validateField(name, value) });
  };

  const validateFormStage = (fields) => {
    const newErrors = {};
    let isValid = true;
    fields.forEach(field => {
      const error = validateField(field, values[field]);
      if (error) {
        newErrors[field] = error;
        isValid = false;
      }
    });
    setErrors({...errors, ...newErrors}); //Mevcut hatalarla birleştir
    return isValid;
  };

  const clearErrors = (fields) => {
    const newErrors = {...errors};
    fields.forEach(field => delete newErrors[field]);
    setErrors(newErrors);
  };

  return {
    values,
    errors,
    handleChange,
    validateFormStage,
    clearErrors,
  };
};


const MyForm = () => {
  const { values, errors, handleChange, validateFormStage, clearErrors } = useFormState(initialFormState);
  const [currentStage, setCurrentStage] = useState(1);

  const handleNextStage = () => {
    let isValid;
    if (currentStage === 1) {
        isValid = validateFormStage(['firstName', 'lastName', 'email']);
    } else {
        isValid = validateFormStage(['street', 'city', 'country']);
    }

    if (isValid) {
      setCurrentStage(currentStage + 1);
    }
  };

  const handlePreviousStage = () => {
    if(currentStage > 1){
      if(currentStage === 2){
        clearErrors(['firstName', 'lastName', 'email']);
      } else {
        clearErrors(['street', 'city', 'country']);
      }
      setCurrentStage(currentStage - 1);
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const isValid = validateFormStage(['firstName', 'lastName', 'email', 'street', 'city', 'country']);
    if (isValid) {
      // Formu gönder
      console.log('Form gönderildi:', values);
      alert('Form gönderildi!'); //Gerçek gönderim mantığıyla değiştirin
    } else {
      console.log('Formda hatalar var, lütfen düzeltin.');
    }
  };

  return (
    

      {currentStage === 1 && (
        

          
Kişisel Bilgiler
          
            Ad:
            
            {errors.firstName && {errors.firstName}}
          
          

          
            Soyad:
            
            {errors.lastName && {errors.lastName}}
          
          

          
            E-posta:
            
            {errors.email && {errors.email}}
          
          

        
      )}

      {currentStage === 2 && (
        

          
Adres Bilgileri
          
            Sokak:
            
            {errors.street && {errors.street}}
          
          

          
            Şehir:
            
            {errors.city && {errors.city}}
          
          

          
            Ülke:
            
            {errors.country && {errors.country}}
          
          

        
      )}

      

        {currentStage > 1 && Önceki}
        {currentStage < 2 && Sonraki}
        {currentStage === 2 && Gönder}
      
    
  );
};

export default MyForm;

4. Adım: Aşama Navigasyonunu Uygulayın

Formun mevcut aşamasını yönetmek ve mevcut aşamaya göre uygun form bölümünü render etmek için durum değişkenleri kullanın.

Gelişmiş Doğrulama Teknikleri

Asenkron Doğrulama

Bazen doğrulama, bir kullanıcı adının uygun olup olmadığını kontrol etmek gibi bir sunucuyla etkileşim gerektirir. Bu durum asenkron doğrulamayı zorunlu kılar. İşte nasıl entegre edileceği:

const validateUsername = async (username) => {
  try {
    const response = await fetch(`/api/check-username?username=${username}`);
    const data = await response.json();
    if (data.available) {
      return null; // Kullanıcı adı uygun
    } else {
      return 'Kullanıcı adı zaten alınmış.';
    }
  } catch (error) {
    console.error('Kullanıcı adı kontrol edilirken hata oluştu:', error);
    return 'Kullanıcı adı kontrol edilirken hata oluştu. Lütfen tekrar deneyin.'; // Ağ hatalarını zarifçe ele alın
  }
};

const useFormStateAsync = (initialState) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });
  };

  const validateFieldAsync = async (fieldName, value) => {
    if (fieldName === 'username') {
      return await validateUsername(value);
    }
    return validateField(fieldName, value);
  };


  const handleSubmit = async (event) => {
      event.preventDefault();
      setIsSubmitting(true);
      let newErrors = {};
      let isValid = true;

      for(const key in values){
        const error = await validateFieldAsync(key, values[key]);
        if(error){
          newErrors[key] = error;
          isValid = false;
        }
      }

      setErrors(newErrors);
      setIsSubmitting(false);

      if (isValid) {
        // Formu gönder
        console.log('Form gönderildi:', values);
        alert('Form gönderildi!'); //Gerçek gönderim mantığıyla değiştirin
      } else {
        console.log('Formda hatalar var, lütfen düzeltin.');
      }
  };



  return {
    values,
    errors,
    handleChange,
    handleSubmit,
    isSubmitting //İsteğe bağlı: doğrulama sırasında yükleme mesajı gösterin
  };
};

Bu örnek, kullanıcı adı uygunluğunu kontrol etmek için bir API çağrısı yapan bir validateUsername fonksiyonu içerir. Potansiyel ağ hatalarını ele aldığınızdan ve kullanıcıya uygun geri bildirim sağladığınızdan emin olun.

Koşullu Doğrulama

Bazı alanlar yalnızca diğer alanların değerine göre doğrulama gerektirebilir. Örneğin, bir "Şirket Web Sitesi" alanı yalnızca kullanıcı çalıştığını belirtirse gerekli olabilir. Doğrulama fonksiyonlarınız içinde koşullu doğrulamayı uygulayın:

const validateFieldConditional = (fieldName, value, formValues) => {
  if (fieldName === 'companyWebsite' && formValues.employmentStatus === 'employed' && !value) {
    return 'Çalışıyorsanız şirket web sitesi zorunludur.';
  }
  return validateField(fieldName, value); // Temel doğrulamaya devret
};

Dinamik Doğrulama Kuralları

Bazen doğrulama kurallarının kendisi, dış faktörlere veya verilere bağlı olarak dinamik olması gerekir. Bunu, dinamik doğrulama kurallarını doğrulama fonksiyonlarınıza argüman olarak geçirerek başarabilirsiniz:

const validateFieldWithDynamicRules = (fieldName, value, rules) => {
  if (rules && rules[fieldName] && rules[fieldName].maxLength && value.length > rules[fieldName].maxLength) {
    return `Bu alan ${rules[fieldName].maxLength} karakterden az olmalıdır.`;
  }
  return validateField(fieldName, value); // Temel doğrulamaya devret
};

Hata Yönetimi ve Kullanıcı Deneyimi

Etkili hata yönetimi, olumlu bir kullanıcı deneyimi için çok önemlidir. Aşağıdakileri göz önünde bulundurun:

• Hataları Açıkça Görüntüleyin: Hata mesajlarını ilgili giriş alanlarının yakınına konumlandırın. Açık ve öz bir dil kullanın.
• Gerçek Zamanlı Doğrulama: Kullanıcı yazarken alanları doğrulayarak anında geri bildirim sağlayın. Performans etkilerine dikkat edin; gerekirse doğrulama çağrılarını debounce veya throttle uygulayın.
• Hatalara Odaklanın: Gönderimden sonra kullanıcının dikkatini hatalı olan ilk alana odaklayın.
• Erişilebilirlik: Hata mesajlarının ARIA nitelikleri ve semantik HTML kullanarak engelli kullanıcılar için erişilebilir olduğundan emin olun.
• Uluslararasılaştırma (i18n): Hata mesajlarını kullanıcının tercih ettiği dilde görüntülemek için uygun uluslararasılaştırmayı uygulayın. i18next veya yerel JavaScript Intl API gibi hizmetler yardımcı olabilir.

Çok Aşamalı Form Doğrulaması İçin En İyi Uygulamalar

• Doğrulama Kurallarını Kısa ve Öz Tutun: Karmaşık doğrulama mantığını daha küçük, yeniden kullanılabilir fonksiyonlara ayırın.
• Kapsamlı Test Edin: Doğrulama kurallarınızın doğruluğunu ve güvenilirliğini sağlamak için birim testleri yazın.
• Bir Doğrulama Kütüphanesi Kullanın: Süreci basitleştirmek ve kod kalitesini artırmak için özel bir doğrulama kütüphanesi (örneğin, Yup, Zod) kullanmayı düşünün. Bu kütüphaneler genellikle şema tabanlı doğrulama sunarak karmaşık doğrulama kurallarını tanımlamayı ve yönetmeyi kolaylaştırır.
• Performansı Optimize Edin: Özellikle gerçek zamanlı doğrulama sırasında gereksiz doğrulama kontrollerinden kaçının. Doğrulama sonuçlarını önbelleğe almak için memoization tekniklerini kullanın.
• Açık Talimatlar Sağlayın: Açık talimatlar ve yardımcı ipuçlarıyla kullanıcıları form tamamlama sürecinde yönlendirin.
• Aşamalı Gösterimi Düşünün: Her aşama için yalnızca ilgili alanları göstererek formu basitleştirin ve bilişsel yükü azaltın.

Alternatif Kütüphaneler ve Yaklaşımlar

Bu kılavuz özel bir useFormState hook'una odaklanırken, benzer işlevselliği genellikle ek özellikler ve performans optimizasyonlarıyla birlikte sağlayan birçok mükemmel form kütüphanesi bulunmaktadır. Bazı popüler alternatifler şunlardır:

• Formik: React'te form durumunu ve doğrulamayı yönetmek için yaygın olarak kullanılan bir kütüphanedir. Form yönetimi için bildirimsel bir yaklaşım sunar ve çeşitli doğrulama stratejilerini destekler.
• React Hook Form: Yeniden render'ları en aza indirmek için kontrolsüz bileşenlerden ve React'in ref API'sinden yararlanan performans odaklı bir kütüphanedir. Büyük ve karmaşık formlar için mükemmel performans sağlar.
• Final Form: Çeşitli UI çerçevelerini ve doğrulama kütüphanelerini destekleyen çok yönlü bir kütüphanedir. Form davranışını özelleştirmek için esnek ve genişletilebilir bir API sunar.

Doğru kütüphaneyi seçmek, özel gereksinimlerinize ve tercihlerinize bağlıdır. Kararınızı verirken performans, kullanım kolaylığı ve özellik seti gibi faktörleri göz önünde bulundurun.

Uluslararası Hususlar

Küresel bir kitle için formlar oluştururken, uluslararasılaştırma ve yerelleştirmeyi dikkate almak önemlidir. İşte bazı önemli hususlar:

• Tarih ve Saat Formatları: Tutarlılığı sağlamak ve karışıklığı önlemek için yerel ayara özgü tarih ve saat formatları kullanın.
• Sayı Formatları: Para birimi simgeleri ve ondalık ayırıcılar da dahil olmak üzere yerel ayara özgü sayı formatları kullanın.
• Adres Formatları: Adres alanlarını farklı ülke formatlarına uyarlayın. Bazı ülkeler şehirlerden önce posta kodları gerektirebilirken, bazılarında hiç posta kodu olmayabilir.
• Telefon Numarası Doğrulaması: Uluslararası telefon numarası formatlarını destekleyen bir telefon numarası doğrulama kütüphanesi kullanın.
• Karakter Kodlaması: Formunuzun Unicode ve diğer Latin olmayan karakterler de dahil olmak üzere farklı karakter setlerini doğru şekilde işlediğinden emin olun.
• Sağdan Sola (RTL) Düzen: Form düzenini buna göre uyarlayarak Arapça ve İbranice gibi RTL dillerini destekleyin.

Bu uluslararası hususları göz önünde bulundurarak, küresel bir kitle için erişilebilir ve kullanıcı dostu formlar oluşturabilirsiniz.

Sonuç

React'in useFormState hook'u (veya alternatif kütüphaneler) ile çok aşamalı bir form doğrulama hattı uygulamak, kullanıcı deneyimini önemli ölçüde iyileştirebilir, performansı artırabilir ve kod sürdürülebilirliğini yükseltebilir. Bu kılavuzda özetlenen temel kavramları anlayarak ve en iyi uygulamaları uygulayarak, modern web uygulamalarının taleplerini karşılayan sağlam ve ölçeklenebilir formlar oluşturabilirsiniz.

Kullanıcı deneyimine öncelik vermeyi, kapsamlı bir şekilde test etmeyi ve doğrulama stratejilerinizi projenizin özel gereksinimlerine göre uyarlamayı unutmayın. Dikkatli planlama ve uygulama ile hem işlevsel hem de kullanımı keyifli formlar oluşturabilirsiniz.

Daha Fazla Bilgi

• React Resmi Dokümantasyonu
• Formik Dokümantasyonu
• React Hook Form Dokümantasyonu