Arkadaşlar merhaba, uzun zamandır uğraştığım bir projede kullanıcı arayüzü validasyonları beni gerçekten zorluyor. Özellikle bir kayıt formum var: kullanıcı adı, e-posta, şifre, şifre tekrarı, doğum tarihi ve bir de üyelik tipi seçimi (bireysel/kurumsal) var. Kurumsal seçilince ek olarak vergi dairesi ve vergi numarası alanları çıkıyor. Her alanın kendine özgü kuralları var, mesela şifre en az 8 karakter, bir büyük harf ve özel karakter içermeli; e-posta formatı kontrolü, doğum tarihinin geçmişte olması gibi. Bunları tek tek kontrol edip hata mesajlarını göstermek için yazdığım kod adeta bir karmaşaya dönüştü. Her validasyon kuralı için ayrı if-else blokları, her alan için ayrı hata state'leri derken sayfa gerçekten okunmaz hale geldi.
Ben genelde vanilla JavaScript kullanıyorum ama bu kadar çok koşul ve birbirine bağımlı alan (mesela kurumsal seçeneğine göre vergi alanlarının zorunlu olması) işin içine girince kod hem uzuyor hem de bakımı imkansızlaşıyor. Mesela kullanıcı doğum tarihini yanlış girdiğinde, bir de üstüne şifre uyuşmazlığı varsa, hata mesajları üst üste binmeye başlıyor. Bazen bir alanı düzeltince diğer hatalar kaybolmuyor veya validasyonu anlık yapmak yerine butona basınca toplu kontrol yapınca kullanıcı deneyimi kötü oluyor. Siz bu tür karmaşık form validasyonlarını nasıl sadeleştiriyorsunuz? Belirli bir pattern veya kullandığınız bir kütüphane var mı? Mesela her bir input için ayrı bir doğrulama fonksiyonu yazmak mı daha mantıklı, yoksa tüm alanları tek bir nesne içinde yönetmek mi?
Ayrıca validasyon mesajlarını kullanıcıya en anlaşılır şekilde nasıl gösteriyorsunuz? Ben şu an her inputun altında kırmızı bir metinle hata gösteriyorum ama bu bazen formu çok kalabalık yapıyor. Hataları toplu bir kutuda göstermek mi daha iyi olur, yoksa inputun yanında bir ikon veya tooltip mi daha kullanışlı? Özellikle mobil cihazlarda bu alanların görünürlüğü ve kullanıcının hatayı anlaması daha da kritik hale geliyor. Bu konuda tecrübesi olan varsa fikirlerini çok merak ediyorum. Hatta varsa örnek bir kod parçacığı veya yaklaşım paylaşabilirseniz süper olur.
Ben genelde vanilla JavaScript kullanıyorum ama bu kadar çok koşul ve birbirine bağımlı alan (mesela kurumsal seçeneğine göre vergi alanlarının zorunlu olması) işin içine girince kod hem uzuyor hem de bakımı imkansızlaşıyor. Mesela kullanıcı doğum tarihini yanlış girdiğinde, bir de üstüne şifre uyuşmazlığı varsa, hata mesajları üst üste binmeye başlıyor. Bazen bir alanı düzeltince diğer hatalar kaybolmuyor veya validasyonu anlık yapmak yerine butona basınca toplu kontrol yapınca kullanıcı deneyimi kötü oluyor. Siz bu tür karmaşık form validasyonlarını nasıl sadeleştiriyorsunuz? Belirli bir pattern veya kullandığınız bir kütüphane var mı? Mesela her bir input için ayrı bir doğrulama fonksiyonu yazmak mı daha mantıklı, yoksa tüm alanları tek bir nesne içinde yönetmek mi?
Ayrıca validasyon mesajlarını kullanıcıya en anlaşılır şekilde nasıl gösteriyorsunuz? Ben şu an her inputun altında kırmızı bir metinle hata gösteriyorum ama bu bazen formu çok kalabalık yapıyor. Hataları toplu bir kutuda göstermek mi daha iyi olur, yoksa inputun yanında bir ikon veya tooltip mi daha kullanışlı? Özellikle mobil cihazlarda bu alanların görünürlüğü ve kullanıcının hatayı anlaması daha da kritik hale geliyor. Bu konuda tecrübesi olan varsa fikirlerini çok merak ediyorum. Hatta varsa örnek bir kod parçacığı veya yaklaşım paylaşabilirseniz süper olur.