HTML form doğrulamasının yetersiz kullanımı

 (expressionstatement.com)
2 puan yazan GN⁺ 2024-10-29 | 1 yorum | WhatsApp'ta paylaş

HTML form doğrulamasının düşük kullanım oranı

  • HTML formları güçlü bir doğrulama mekanizmasına sahip, ancak çok fazla kullanılmıyor. Birçok kişi bunun farkında değil. Bunun nedeni tasarımdaki kusurlar olabilir.

Öznitelikler, metotlar ve özellikler

  • Boş girişi önlemek için required özniteliği eklenebilir.
  • Girdiye kısıt eklemenin üç yolu vardır:
    • Belirli type öznitelik değerlerini kullanmak: "email", "number", "url"
    • "pattern" veya "maxlength" gibi diğer girdi özniteliklerini kullanmak
    • setCustomValidity DOM metodunu kullanmak: özel doğrulama mantığı oluşturabilen ve karmaşık durumları ele alabilen en güçlü yöntemdir.

Buyurgan API'nin incelikleri

  • setCustomValidity API'si yalnızca metot olarak sunulduğu için kullanımı elverişsizdir.
  • Örneğin, girdi boş olduğunda form gönderimini engellemek için required özniteliğiyle aynı işlev uygulanabilir.
  • İlk render sırasında girdi boşsa geçersiz olarak ayarlanması gerekir.

Boilerplate sorunu

  • İlk değeri doğrulama yöntemi zahmetlidir.
  • Doğrulama mantığı onChange işleyicisinde ve ilk render aşamasında tekrar eder.
  • useRef + useLayoutEffect + onChange birleşimi karmaşıktır.

Eksik olan parça

  • custom-validity özniteliğine ihtiyaç vardır.
  • Bildirimsel framework'lerde girdi doğrulaması güçlü biçimde tanımlanabilir.

Asenkron doğrulamanın gücü

  • Kullanıcı adı girdisinin yalnızca kullanılmıyorsa geçerli olması gereken durumlar ele alınabilir.
  • Sunucuya asenkron çağrı ve bir ara durum gerekir.

Uygulama

  • verifyUsername fonksiyonu kullanıcı adının benzersizliğini kontrol etmek için kullanılır.
  • useQuery ile sunucu isteğinin durumu yönetilir.
  • customValidity özniteliği ile asenkron doğrulama akışı açıklanır.

Şifre doğrulama formu

  • Girilen şifrenin tekrar yazılması gereken bir form uygulanır.
  • Doğrulama, iki giriş alanının eşleşip eşleşmediği kontrol edilerek yapılır.

Sonuç

  • setCustomValidity, çeşitli doğrulama gereksinimlerini karşılayabilir.
  • Güçlü bir API asıl gücü sağlar.
  • Bu özelliğin HTML spesifikasyonuna eklenmesi umuluyor.

GN⁺ özeti

  • HTML form doğrulaması güçlü olsa da iyi kullanılmıyor. Bunun nedeni API'nin karmaşıklığı olabilir.
  • setCustomValidity metodu, karmaşık doğrulama mantığını işleyebilen güçlü bir araçtır.
  • Asenkron doğrulama gibi karmaşık senaryoları ele alabilecek yöntemler sunuluyor.
  • Bu yazı, geliştiricilerin HTML form doğrulamasını daha iyi kullanmasına yardımcı olacak faydalı bilgiler sağlıyor.

İlgili okumalar

1 yorum

 
GN⁺ 2024-10-29
Hacker News görüşleri

  • Web tarayıcıları hâlâ yerleşik HTML doğrulama mesajlarının stilini değiştirmeye izin vermiyor ve Chrome ile Firefox, işletim sistemi platformu UI yönergelerini izlemediği için projenin estetik anlayışıyla çakışıyor

    • Chrome daha önce vendor önekli pseudo-element seçicileri kullanarak doğrulama mesajlarının stilini değiştirmeye izin veriyordu, ancak bu özellik kaldırıldı
    • HTML combobox ve <select multiple> kullanımındaki verimsizlikten şikâyet ediliyor

  • Belirli type öznitelik değerlerini (ör. "email", "number", "url") kullanmak, mobilde en uygun klavyeyi tetikleyerek kullanıcı deneyimini önemli ölçüde iyileştirebilir

  • Spesifikasyonu yazan kişiler gerçek kullanımdan kopuk ve basit şeyler için uygun olsa da karmaşık formlarda elle yazmak daha iyi

  • Formların temel sadeliğini gözden kaçırmış olmaktan duyulan pişmanlık dile getiriliyor ve başka birinin bakış açısını paylaştığı için teşekkür ediliyor

  • Checkbox için bir label olduğunda, label'a "for" özniteliği eklenerek label'a tıklamanın checkbox'ı etkinleştirip devre dışı bırakabilmesi isteniyor

  • React kullanmayan basit bir örnek veriliyor

  • HTML form doğrulaması harika, ancak Firefox for Android'de çalışmaması gibi büyük bir sorun var

  • Birçok framework ve kütüphane stillendirilebilir doğrulama özellikleri sunduğu için, bunun için özellikle uğraşmaya gerek yok

  • Doğrulamayı aşırı kullanmamaya dikkat etmek gerekiyor

    • Groupon iadesinde "en az 15 kelime" şartı yüzünden HTML'i incelemek zorunda kalındığı bir deneyim aktarılıyor
    • Doğrulama deseni noktalama işaretlerine hiç izin vermiyor

  • 2FA girişinde type=password yanlış kullanıldığında parola yöneticileri ve tarayıcıların kafası karışıyor