React Uygulamalarında calidation ile Kızgın Form Doğrulaması: Kapsamlı Bir Rehber
Giriş
Web uygulamalarının temel taşlarından biri olan formlar, kullanıcı etkileşiminin ve veri toplamanın merkezinde yer alır. Kayıt işlemleri, giriş sayfaları, iletişim formları, ödeme ekranları gibi birçok senaryoda kullanıcıdan bilgi girişi talep edilir. Ancak, kullanıcıdan alınan verinin doğruluğu ve bütünlüğü, uygulamanın güvenilirliği ve işlevselliği açısından kritik öneme sahiptir. Yanlış veya eksik veri girişi, uygulamanın hatalı çalışmasına, güvenlik açıklarına veya kötü bir kullanıcı deneyimine yol açabilir. İşte bu noktada form doğrulama (form validation) devreye girer.
Form doğrulama, kullanıcı tarafından girilen verilerin belirli kurallara uygun olup olmadığını kontrol etme sürecidir. Bu kurallar, bir alanın boş bırakılıp bırakılamayacağı, bir e-posta adresinin doğru formatta olup olmadığı, bir şifrenin minimum uzunlukta olup olmadığı gibi çeşitli kontrolleri içerebilir. React gibi modern JavaScript kütüphaneleriyle geliştirilen uygulamalarda, form doğrulama süreci hem istemci tarafında (client-side) hem de sunucu tarafında (server-side) ele alınabilir. İstemci tarafı doğrulama, kullanıcıya anında geri bildirim sağlayarak hataları düzeltme fırsatı verir ve sunucuya gereksiz istek gönderimini azaltır. Sunucu tarafı doğrulama ise güvenlik ve veri bütünlüğü açısından son kontrol katmanını oluşturur.
React ekosisteminde form doğrulama için birçok farklı yaklaşım ve kütüphane bulunmaktadır. Formik, React Hook Form, Yup gibi popüler seçenekler, karmaşık formları yönetmek için güçlü araçlar sunar. Ancak, bazen daha hafif, daha odaklanmış ve esnek bir çözüme ihtiyaç duyulabilir. İşte tam da bu noktada calidation sahneye çıkıyor. calidation, özellikle basit ve orta düzeydeki form doğrulama ihtiyaçları için tasarlanmış, kullanımı kolay, hafif ve modüler bir JavaScript doğrulama kütüphanesidir. Bu makalede, calidation‘ın React uygulamalarında nasıl “kızgın” (red hot) bir doğrulama deneyimi sunabileceğini, kurulumundan gelişmiş kullanım senaryolarına kadar tüm detaylarıyla inceleyeceğiz.
calidation Nedir ve Neden Kullanmalıyız?
calidation, JavaScript için tasarlanmış, kural tabanlı bir doğrulama kütüphanesidir. Temel amacı, veri doğrulamayı basit ve anlaşılır bir şekilde gerçekleştirmektir. Diğer bazı kapsamlı form yönetim kütüphanelerinin aksine, calidation yalnızca doğrulama işlevine odaklanır. Bu odaklanma, kütüphanenin hafif kalmasını, öğrenme eğrisinin düşük olmasını ve mevcut React form yapılarıyla kolayca entegre olabilmesini sağlar.
calidation’ın Temel Özellikleri
* Kural Tabanlı Doğrulama: Doğrulama kuralları (örn. required, email, minLength) tanımlayarak çalışır. Bu kurallar, doğrulanacak verinin niteliklerini belirler.
* Özelleştirilebilir Hata Mesajları: Her kural için özel hata mesajları tanımlayabilme yeteneği, kullanıcıya daha anlamlı geri bildirimler sunar.
* Asenkron Doğrulama Desteği: Sunucu tarafı kontrolleri veya API çağrıları gerektiren durumlar için asenkron doğrulama yapabilir.
* Koşullu Doğrulama: Belirli koşullar altında belirli alanların doğrulanmasını sağlar. Örneğin, bir onay kutusu işaretliyse ek bir alanın zorunlu olması.
* Bağımlı Alan Doğrulama: Bir alanın doğruluğunun başka bir alanın değerine bağlı olduğu senaryoları destekler (örn. “şifre tekrarı” alanının “şifre” alanı ile eşleşmesi).
* Hafif ve Modüler: Minimal bağımlılıklara sahip olması ve sadece doğrulama işine odaklanması sayesinde projenize gereksiz yük getirmez.
* React Dostu: React’in state yönetimi ve component yapısı ile sorunsuz bir şekilde entegre edilebilir.
Neden calidation Kullanmalıyız?
1. Basitlik ve Hız: Karmaşık form yönetim mantığına ihtiyaç duymadığınız, sadece hızlı ve etkili bir doğrulama aradığınız durumlarda calidation idealdir. Öğrenmesi ve uygulaması oldukça kolaydır.
2. Esneklik: Mevcut form yapınızdan ödün vermeden, React’in useState veya useReducer gibi yerleşik hook’ları ile kolayca entegre edilebilir. Kütüphanenin form yönetimi üzerinde dayatmacı bir yapısı yoktur.
3. Performans: Hafif yapısı sayesinde uygulamanızın bundle boyutunu artırmaz ve doğrulama işlemlerini hızlı bir şekilde gerçekleştirir.
4. Kontrol: Doğrulama kurallarını ve hata mesajlarını tam kontrol altında tutmanızı sağlar. Bu, özellikle özel iş mantıkları veya çok dilli uygulamalar geliştirirken önemlidir.
5. Özelleştirilebilirlik: Kendi özel doğrulama kurallarınızı tanımlayarak calidation‘ın yeteneklerini projenizin özel ihtiyaçlarına göre genişletebilirsiniz.
Diğer kütüphanelerle karşılaştırıldığında, calidation daha çok Yup gibi bir şema doğrulama kütüphanesine benzer ancak kendi form yönetimini getirmemesiyle ayrılır. Eğer React Hook Form veya Formik gibi kütüphanelerin sunduğu tüm form yönetimi özelliklerine (kayıt, odaklama, resetleme vb.) ihtiyacınız yoksa ve sadece güçlü bir doğrulama motoru arıyorsanız, calidation mükemmel bir seçim olabilir.
calidation ile Temel Form Doğrulaması
calidation ile React uygulamanızda form doğrulaması yapmak oldukça basittir. Adım adım kurulumdan başlayarak temel doğrulama kurallarının nasıl uygulanacağını görelim.
Kurulum
İlk adım, calidation kütüphanesini projenize eklemektir. Bunu npm veya yarn kullanarak yapabilirsiniz:
npm install calidation
veya
yarn add calidationBasit Bir Form Örneği
Şimdi, bir kullanıcı kayıt formu düşünelim. Bu formda bir e-posta, bir kullanıcı adı ve bir şifre alanı olsun.
import React, { useState } from 'react';
import { Validator } from 'calidation';
// Doğrulama şemamızı tanımlıyoruz
const registerValidator = new Validator({
email: {
rule: 'email',
message: 'Lütfen geçerli bir e-posta adresi girin.',
},
username: {
rule: 'minLength:3',
message: 'Kullanıcı adı en az 3 karakter olmalı.',
},
password: {
rule: 'minLength:6',
message: 'Şifreniz en az 6 karakter olmalı.',
},
});
function RegisterForm() {
const [formData, setFormData] = useState({
email: '',
username: '',
password: '',
});
const [errors, setErrors] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
const handleChange = (e) => {
const { name, value } = e.target;
setFormData((prevData) => ({ ...prevData, [name]: value }));
// Alan değiştiğinde anında doğrulama yapabiliriz
const validationResult = registerValidator.validate({ ...formData, [name]: value });
setErrors(validationResult.errors);
};
const handleSubmit = async (e) => {
e.preventDefault();
setIsSubmitting(true);
const validationResult = registerValidator.validate(formData);
if (validationResult.isValid) {
console.log('Form geçerli, gönderiliyor:', formData);
// Burada formu sunucuya gönderme veya başka bir işlem yapabilirsiniz
await new Promise(resolve => setTimeout(resolve, 1000)); // Simüle edilmiş API çağrısı
alert('Kayıt başarılı!');
setFormData({ email: '', username: '', password: '' }); // Formu sıfırla
setErrors({});
} else {
console.log('Form hatalı:', validationResult.errors);
setErrors(validationResult.errors);
}
setIsSubmitting(false);
};
return (
);
}
export default RegisterForm;Yukarıdaki örnekte, calidation‘ı React’in useState hook’u ile nasıl entegre ettiğimizi görüyorsunuz.
1. Validator Tanımlama: İlk olarak, new Validator() ile bir doğrulayıcı örneği oluşturuyoruz. Bu örneğe, her form alanı için bir kural nesnesi içeren bir konfigürasyon objesi iletiyoruz.
2. Doğrulama Kuralları:
* email: { rule: 'email', message: '...' }: email kuralı, alanın geçerli bir e-posta formatında olup olmadığını kontrol eder.
* username: { rule: 'minLength:3', message: '...' }: minLength:3 kuralı, alanın değerinin en az 3 karakter uzunluğunda olmasını sağlar.
* password: { rule: 'minLength:6', message: '...' }: minLength:6 kuralı, şifrenin en az 6 karakter uzunluğunda olmasını gerektirir.
3. Form Durumu Yönetimi: formData state’i, formdaki tüm alanların değerlerini tutar. errors state’i ise doğrulama sonucunda oluşan hataları saklar.
4. handleChange Fonksiyonu: Bir input alanı değiştiğinde çağrılır. formData‘yı günceller ve isteğe bağlı olarak anında doğrulama yaparak errors state’ini günceller. Bu, kullanıcıya yazarken anında geri bildirim sağlar.
5. handleSubmit Fonksiyonu: Form gönderildiğinde çağrılır. registerValidator.validate(formData) metodu ile tüm form verilerini doğrular.
* validationResult.isValid: Tüm alanlar geçerliyse true, aksi takdirde false döner.
* validationResult.errors: Geçersiz alanlar için hata mesajlarını içeren bir objedir.
6. Hata Mesajlarını Gösterme: Her input alanının altında, ilgili alana ait bir hata mesajı varsa (errors.email, errors.username vb.) bu mesajı gösteriyoruz.
Bu temel yapı, calidation ile form doğrulaması yapmanın ana akışını oluşturur. calidation, required, maxLength, numeric, alpha, alphaNumeric, url, date, json, regex gibi birçok yerleşik kuralı destekler.
Gelişmiş Doğrulama Senaryoları
calidation, sadece temel kurallarla sınırlı kalmaz; daha karmaşık doğrulama ihtiyaçlarını karşılamak için güçlü özellikler sunar.
Özel Doğrulama Kuralları (Custom Rules)
calidation‘ın en güçlü yanlarından biri, kendi özel doğrulama kurallarınızı kolayca tanımlayabilmenizdir. Örneğin, bir şifrenin en az bir büyük harf, bir küçük harf ve bir rakam içermesi gerektiğini doğrulamak isteyebilirsiniz.
import { Validator } from 'calidation';
// Özel kuralımızı tanımlıyoruz
Validator.addRule('strongPassword', (value) => {
if (!value) return true; // Boşsa zorunlu değilse geçerli say
const hasUpperCase = /[A-Z]/.test(value);
const hasLowerCase = /[a-z]/.test(value);
const hasNumber = /[0-9]/.test(value);
return hasUpperCase && hasLowerCase && hasNumber;
}, 'Şifre en az bir büyük harf, bir küçük harf ve bir rakam içermeli.');
const passwordValidator = new Validator({
password: {
rule: 'strongPassword',
message: 'Lütfen daha güçlü bir şifre belirleyin.', // Kuralın varsayılan mesajını ezebiliriz
},
});
// Artık 'strongPassword' kuralını herhangi bir yerde kullanabiliriz.Validator.addRule metodu üç argüman alır: kural adı, doğrulama fonksiyonu ve varsayılan hata mesajı. Doğrulama fonksiyonu, doğrulanacak değeri alır ve geçerliyse true, geçersizse false döner.
Asenkron Doğrulama
Kullanıcı adı benzersizliği kontrolü gibi sunucu tarafı bir API çağrısı gerektiren durumlar için asenkron doğrulama yapmak gerekebilir. calidation, bu tür senaryoları destekler.
import { Validator } from 'calidation';
// Simüle edilmiş bir API çağrısı
const checkUsernameAvailability = async (username) => {
console.log(Kullanıcı adı "${username}" kontrol ediliyor...);
await new Promise(resolve => setTimeout(resolve, 1500)); // 1.5 saniye bekle
const unavailableUsernames = ['admin', 'moderator', 'testuser'];
return !unavailableUsernames.includes(username.toLowerCase());
};
Validator.addRule('uniqueUsername', async (value) => {
if (!value) return true;
return await checkUsernameAvailability(value);
}, 'Bu kullanıcı adı zaten alınmış.');
const asyncValidator = new Validator({
username: {
rule: 'uniqueUsername',
message: 'Bu kullanıcı adı kullanılamaz.',
},
});
// React component içinde kullanım (yukarıdaki temel form örneğine benzer)
// handleSubmit içinde veya handleChange içinde asenkron doğrulamayı tetikleyebilirsiniz.
// validate metodu Promise döndürecektir.
// const validationResult = await asyncValidator.validate(formData);Asenkron bir kural tanımladığınızda, validate metodu bir Promise döndürecektir. Bu Promise çözüldüğünde, doğrulama sonucunu içeren bir obje elde edersiniz. Bu, handleSubmit fonksiyonunuzu async/await kullanarak yönetmenizi gerektirir.
Bağımlı Alan Doğrulama
Bir alanın doğruluğunun başka bir alanın değerine bağlı olduğu durumlar (örneğin, şifre ve şifre tekrarı alanlarının eşleşmesi) sıkça karşılaşılan bir senaryodur. calidation‘da bu, doğrulama fonksiyonuna tüm form verilerini ileterek yapılabilir.
import { Validator } from 'calidation';
Validator.addRule('matchesField', (value, data, fieldName) => {
if (!value || !data || !fieldName) return true;
return value === data[fieldName];
}, 'Bu alan {field} ile eşleşmiyor.'); // {field} placeholder'ı kullanılabilir
const passwordMatchValidator = new Validator({
password: {
rule: 'minLength:6',
message: 'Şifreniz en az 6 karakter olmalı.',
},
confirmPassword: {
rule: ['required', 'matchesField:password'], // Birden fazla kural ve bağımlı kural
message: {
required: 'Şifre tekrarı zorunludur.',
matchesField: 'Şifreler eşleşmiyor.',
},
},
});
// Kullanım:
// const validationResult = passwordMatchValidator.validate(formData);matchesField:password kuralında, :password kısmı matchesField fonksiyonuna fieldName olarak iletilir. Bu sayede value === data[fieldName] kontrolü yapılabilir. message özelliğine bir obje vererek her kural için ayrı mesajlar tanımlayabiliriz.
Dinamik Formlar ve Liste Doğrulama
Kullanıcıların dinamik olarak alan ekleyebildiği veya kaldırabildiği formlarda (örneğin, bir liste öğeleri ekleme) doğrulama yapmak daha karmaşık hale gelebilir. calidation doğrudan liste doğrulama için özel bir yapı sunmasa da, bu senaryoları mevcut yapısıyla yönetmek mümkündür. Her liste öğesi için ayrı bir doğrulayıcı örneği oluşturabilir veya ana doğrulayıcının validate metoduna dinamik olarak oluşturulmuş veriyi gönderebilirsiniz.
// Örnek: Bir array içindeki objelerin doğrulanması
const itemValidator = new Validator({
name: { rule: 'required', message: 'Ürün adı zorunludur.' },
quantity: { rule: 'numeric', message: 'Miktar sayı olmalı.' },
});
// React component içinde
const [items, setItems] = useState([{ id: 1, name: '', quantity: '' }]);
const [itemErrors, setItemErrors] = useState({});
const handleItemChange = (id, field, value) => {
setItems(prevItems =>
prevItems.map(item => (item.id === id ? { ...item, [field]: value } : item))
);
// Anında doğrulama için:
const currentItem = items.find(item => item.id === id);
const updatedItem = { ...currentItem, [field]: value };
const validationResult = itemValidator.validate(updatedItem);
setItemErrors(prevErrors => ({ ...prevErrors, [id]: validationResult.errors }));
};
const handleListSubmit = (e) => {
e.preventDefault();
let allItemsValid = true;
let newErrors = {};
items.forEach(item => {
const validationResult = itemValidator.validate(item);
if (!validationResult.isValid) {
allItemsValid = false;
newErrors[item.id] = validationResult.errors;
}
});
setItemErrors(newErrors);
if (allItemsValid) {
console.log('Tüm öğeler geçerli:', items);
// Submit list data
} else {
console.log('Öğelerde hatalar var:', newErrors);
}
};Bu yaklaşımda, her bir liste öğesini ayrı ayrı doğrulayarak hataları itemErrors state’inde saklıyoruz.
Koşullu Doğrulama
Bir alanın doğrulama kurallarının, başka bir alanın değerine veya belirli bir duruma bağlı olduğu senaryolar için koşullu doğrulama kullanışlıdır. calidation‘da bu, when özelliği ile veya özel bir kural içinde mantık yürüterek yapılabilir.
const conditionalValidator = new Validator({
newsletterSubscription: {
rule: 'boolean',
},
email: {
rule: 'email',
message: 'Geçerli bir e-posta adresi girin.',
when: {
newsletterSubscription: true, // newsletterSubscription true ise email'i doğrula
},
},
});
// Veya daha karmaşık koşullar için custom rule içinde mantık yürütebilirsiniz.
Validator.addRule('conditionalRequired', (value, data, fieldName) => {
if (data.userType === 'admin' && !value) {
return false; // admin ise ve boşsa geçersiz
}
return true;
}, 'Bu alan sadece yöneticiler için zorunludur.');
const complexConditionalValidator = new Validator({
userType: {
rule: 'required',
},
adminCode: {
rule: ['conditionalRequired:userType', 'minLength:5'],
message: {
conditionalRequired: 'Yönetici kodu zorunludur.',
minLength: 'Yönetici kodu en az 5 karakter olmalı.'
}
}
});when özelliği, belirli bir alanın değerine göre kuralın uygulanıp uygulanmayacağını belirler. conditionalRequired gibi özel kurallar ise daha karmaşık koşullu mantık için esneklik sağlar.
calidation’ın React ile Entegrasyonu
calidation‘ı React uygulamalarınıza entegre etmenin en yaygın yolları, React’in yerleşik state yönetimi mekanizmalarını kullanmak veya özel bir hook (custom hook) oluşturmaktır.
useState ve useRef ile Entegrasyon
Yukarıdaki örneklerde gördüğünüz gibi, useState hook’u formData ve errors state’lerini yönetmek için temel bir yaklaşımdır. useRef ise, doğrudan DOM elemanlarına erişmek veya bir değerin render’lar arasında değişmeden kalmasını sağlamak istediğinizde kullanılabilir, ancak form değerleri için useState genellikle daha uygundur.
Her bir input için onChange olayını dinleyerek formData‘yı güncellemek ve ardından calidation‘ı kullanarak doğrulama yapmak standart bir yöntemdir.
// Zaten yukarıdaki örneklerde detaylıca gösterildi.
// Ana fikir:
// 1. formData state'i (useState)
// 2. errors state'i (useState)
// 3. handleChange fonksiyonu (onChange olayında formData'yı ve hataları günceller)
// 4. handleSubmit fonksiyonu (onSubmit olayında tüm formu doğrular ve hata varsa setErrors'ı çağırır)useForm veya Benzeri Custom Hook Yaklaşımları
Tekrarlayan form doğrulama mantığını soyutlamak ve kodunuzu daha temiz hale getirmek için kendi useForm custom hook’unuzu oluşturabilirsiniz. Bu hook, calidation doğrulayıcısını, form verilerini, hataları ve handleChange, handleSubmit gibi yardımcı fonksiyonları kapsayabilir.
import { useState, useCallback } from 'react';
import { Validator } from 'calidation';
function useForm(initialState, validationSchema) {
const [formData, setFormData] = useState(initialState);
const [errors, setErrors] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
const validator = new Validator(validationSchema);
const handleChange = useCallback((e) => {
const { name, value, type, checked } = e.target;
const newValue = type === 'checkbox' ? checked : value;
setFormData((prevData) => {
const updatedData = { ...prevData, [name]: newValue };
// Anında doğrulama
const validationResult = validator.validate(updatedData);
setErrors(validationResult.errors);
return updatedData;
});
}, [validator]); // validator'ın değişmediğinden emin olmak için bağımlılık ekliyoruz
const handleSubmit = useCallback(async (callback) => {
setIsSubmitting(true);
const validationResult = await validator.validate(formData); // Asenkron kural varsa await
if (validationResult.isValid) {
await callback(formData); // Form geçerliyse dışarıdan gelen callback'i çağır
setErrors({}); // Başarılı gönderimde hataları temizle
} else {
setErrors(validationResult.errors);
}
setIsSubmitting(false);
}, [formData, validator]);
const resetForm = useCallback(() => {
setFormData(initialState);
setErrors({});
}, [initialState]);
return {
formData,
errors,
handleChange,
handleSubmit,
isSubmitting,
resetForm,
};
}
export default useForm;Bu useForm hook’unu kullanarak form bileşeniniz çok daha sade hale gelir:
import React from 'react';
import useForm from './useForm'; // Kendi hook'umuzu import ediyoruz
import { Validator } from 'calidation';
const loginValidationSchema = {
email: {
rule: 'email',
message: 'Geçerli bir e-posta adresi girin.',
},
password: {
rule: 'minLength:6',
message: 'Şifreniz en az 6 karakter olmalı.',
},
};
function LoginForm() {
const { formData, errors, handleChange, handleSubmit, isSubmitting, resetForm } = useForm(
{ email: '', password: '' },
loginValidationSchema
);
const onSubmit = async (data) => {
console.log('Giriş yapılıyor:', data);
await new Promise(resolve => setTimeout(resolve, 1000));
alert('Giriş başarılı!');
resetForm();
};
return (
);
}
export default LoginForm;Bu custom hook yaklaşımı, form doğrulama mantığını yeniden kullanılabilir hale getirir ve bileşenlerinizi daha okunur ve yönetilebilir kılar.
Performans İpuçları
* Doğrulayıcıyı Tek Seferlik Oluşturun: Validator örneğini her render’da yeniden oluşturmak yerine, bileşenin dışında veya useMemo ile bir kez oluşturun. Yukarıdaki useForm hook’unda bu, new Validator(validationSchema)‘nın hook’un içinde bir kez oluşturulmasıyla sağlanır.
* useCallback Kullanımı: handleChange ve handleSubmit gibi fonksiyonları useCallback ile sarmalayarak gereksiz yeniden oluşturmaları önleyin. Bu, özellikle büyük formlarda veya çocuk bileşenlere props olarak iletildiğinde performansı artırabilir.
* Gecikmeli Doğrulama: onChange olayında her tuş vuruşunda doğrulama yapmak yerine, onBlur olayında veya bir debounce fonksiyonu ile gecikmeli doğrulama yaparak gereksiz hesaplamaları azaltabilirsiniz.
Gerçek Dünya Uygulamaları ve En İyi Pratikler
Form doğrulama sadece teknik bir gereklilik değil, aynı zamanda kullanıcı deneyimini doğrudan etkileyen bir faktördür.
Kullanıcı Deneyimi (UX) Açısından Doğrulama
* Anında Geri Bildirim: Kullanıcı bir alanı terk ettiğinde (onBlur) veya yazmaya başladığında (onChange) anında doğrulama yaparak hataları hızlıca belirtin. Bu, kullanıcıların formu göndermeden önce hataları düzeltmesine olanak tanır.
* Açık ve Anlaşılır Hata Mesajları: Hata mesajları, hatanın ne olduğunu ve nasıl düzeltileceğini net bir şekilde açıklamalıdır. calidation‘ın özelleştirilebilir hata mesajları bu konuda büyük avantaj sağlar.
* Görsel İşaretler: Hatalı alanları kırmızı kenarlıklar, hata simgeleri veya metin renkleriyle görsel olarak vurgulayın.
* Formu Göndermeden Önce Önleme: Form geçerli olana kadar gönder düğmesini devre dışı bırakmak, gereksiz sunucu isteklerini önler ve kullanıcıyı bilgilendirir.
Erişilebilirlik (Accessibility) Konuları
* ARIA Nitelikleri: Hata mesajlarını ve hata durumundaki input alanlarını, ekran okuyucuların anlayabileceği şekilde aria-invalid="true" ve aria-describedby="[hata-mesajı-id]" gibi ARIA nitelikleriyle işaretleyin.
* Etiketler: Her input alanının ilişkili bir etiketi olduğundan emin olun.
* Odak Yönetimi: Form gönderildiğinde hatalar varsa, odak noktasını ilk hatalı alana taşımak, klavye ile gezinme yapan kullanıcılar için faydalıdır.
Uluslararasılaşma (i18n) ve Hata Mesajları
Çok dilli uygulamalarda hata mesajlarının çevrilmesi gerekir. calidation‘ın hata mesajlarını bir obje olarak tanımlama yeteneği ve özel kural mesajlarını ezme esnekliği, i18n entegrasyonunu kolaylaştırır. Bir i18n kütüphanesi (örn. react-i18next) ile entegre ederek hata mesajlarını dinamik olarak alabilirsiniz.
// i18n kütüphanesinden çeviri fonksiyonu geldiğini varsayalım
const t = (key, params) => { / çeviri mantığı / return key; };
const i18nValidator = new Validator({
email: {
rule: 'email',
message: t('validation.emailInvalid'), // Çeviri anahtarını kullan
},
password: {
rule: 'minLength:6',
message: t('validation.passwordMinLength', { length: 6 }), // Parametreli çeviri
},
});Test Etme Stratejileri
Form doğrulamasını test etmek, uygulamanızın güvenilirliğini sağlamak için kritik öneme sahiptir.
* Birim Testleri: Her bir doğrulama kuralını ayrı ayrı test edin. calidation‘ın Validator sınıfı ve özel kurallarınız, izole bir şekilde test edilebilir.
* Entegrasyon Testleri: Form bileşenlerinizin, calidation ile birlikte nasıl çalıştığını test edin. Formu geçersiz verilerle göndermeyi deneyin ve doğru hata mesajlarının gösterildiğinden emin olun. Geçerli verilerle gönderildiğinde başarılı bir işlem gerçekleştiğini doğrulayın.
* E2E Testleri: Kullanıcı arayüzü üzerinden uçtan uca testler yaparak, gerçek kullanıcı senaryolarında form doğrulamanın doğru çalıştığını doğrulayın.
Güvenlik
Unutulmamalıdır ki, istemci tarafı doğrulama sadece kullanıcı deneyimi içindir. Asla sunucu tarafı doğrulamayı atlamayın. Kötü niyetli bir kullanıcı, istemci tarafı doğrulamayı kolayca atlayabilir. Bu nedenle, sunucu tarafında da aynı veya daha sıkı doğrulama kurallarını uygulamanız hayati öneme sahiptir. calidation‘ı hem istemci tarafında hem de Node.js gibi bir sunucu ortamında kullanabilirsiniz, bu da doğrulama mantığınızı her iki tarafta da paylaşmanıza olanak tanır.
Sıkça Sorulan Sorular ve İpuçları
Hata Mesajlarını Özelleştirme
calidation‘da hata mesajlarını özelleştirmek oldukça kolaydır. Kural tanımının message özelliğini kullanırsınız:
const myValidator = new Validator({
age: {
rule: 'numeric',
message: 'Yaş alanı sadece sayısal değerler içermelidir.',
},
});Birden fazla kural için farklı mesajlar:
const multipleRulesValidator = new Validator({
username: {
rule: ['required', 'minLength:3'],
message: {
required: 'Kullanıcı adı boş bırakılamaz.',
minLength: 'Kullanıcı adı en az 3 karakter olmalı.',
},
},
});Birden Fazla Form Alanı İçin Doğrulama
calidation zaten varsayılan olarak tüm form alanlarını aynı anda doğrular. validator.validate(formData) çağrısı, formData içindeki her bir alan için tanımlanmış kuralları kontrol eder ve tüm hataları validationResult.errors objesinde döndürür.
Form Sıfırlama
Formu sıfırlamak için, formData state’ini başlangıç değerlerine ve errors state’ini boş bir objeye geri ayarlamanız yeterlidir. useForm custom hook’umuzda resetForm fonksiyonu bu işlevi görür.
const resetForm = () => {
setFormData(initialState);
setErrors({});
};Sadece Belirli Alanları Doğrulama
Bazen sadece belirli bir alanı doğrulamak isteyebilirsiniz (örneğin, onBlur olayında). calidation‘ın validate metodu, ikinci bir argüman olarak doğrulanacak alan adlarını bir dizi olarak alabilir:
const handleChange = (e) => {
const { name, value } = e.target;
setFormData((prevData) => ({ ...prevData, [name]: value }));
// Sadece değişen alanı doğrula
const validationResult = registerValidator.validate({ ...formData, [name]: value }, [name]);
setErrors((prevErrors) => ({ ...prevErrors, ...validationResult.errors }));
};Bu, özellikle büyük formlarda performans açısından faydalı olabilir, çünkü yalnızca ilgili alanın kuralları çalıştırılır.
Sonuç
React uygulamalarında form doğrulama, hem kullanıcı deneyimi hem de veri bütünlüğü açısından göz ardı edilmemesi gereken kritik bir süreçtir. calidation, bu ihtiyacı karşılamak için hafif, esnek ve güçlü bir çözüm sunar. Temel doğrulama kurallarından özel, asenkron ve koşullu doğrulama senaryolarına kadar geniş bir yelpazeyi desteklerken, React’in state yönetimi mekanizmalarıyla sorunsuz bir şekilde entegre olur.
calidation‘ın odaklanmış yapısı, özellikle form yönetimini kendiniz halletmeyi tercih ettiğiniz veya Formik gibi daha kapsamlı kütüphanelerin getirdiği ek soyutlamalara ihtiyaç duymadığınız durumlarda parlar. Kendi useForm custom hook’unuzu oluşturarak calidation‘ı daha da soyutlayabilir ve projenizde yeniden kullanılabilir, temiz bir form doğrulama katmanı oluşturabilirsiniz.
Unutmayın ki istemci tarafı doğrulama, kullanıcıya anında geri bildirim sağlamak ve hatalı veri gönderimini azaltmak için harika olsa da, güvenlik ve veri bütünlüğünün nihai garantisi her zaman sunucu tarafı doğrulamadır. calidation‘ı hem istemci hem de sunucu tarafında kullanarak tutarlı bir doğrulama mantığı oluşturabilir, böylece uygulamanızın her katmanda “kızgın” bir doğrulama deneyimi sunmasını sağlayabilirsiniz. React geliştiricileri için calidation, form doğrulama araç kutusunda kesinlikle bulunması gereken değerli bir araçtır.