:user-invalid seçicisi

6 Kasım 2023

Form doğrulama işi önemli. Form doğrulama işini tarayıcılar ekledikleri özelliklerle eline almaya çalışsa da belli alanlarda yetersiz kaldığı için hala Javascript ile çözümler oluşturuyoruz.

CSS ile hata durumunu yakalayıp ona göre hatayı ve hata mesajını stillendirebildiğimiz :valid ve :invalid sözde sınflarımız var.

input:invalid {
  border-color: red;
}

Ancak uygulamada şöyle problemimiz oluyordu. :valid ve :invalid sözde sınflarımız ile stillendiğimiz form elemanları kullanıcı form alanına odaklandığında kontrole başladığı için kullanıcı daha giriş yapmadan yada işlemini tamamlamadan tetiklenip hatalı varmış gibi görüntü vermeye başlıyor. Bu durumu çözmek için arka kapıdan çözümler oluşturuyorduk.

input:not(:focus):invalid {
  border-color: red;
}

hatta boş durumu da kapsayan en son şöyle çözümler var.

input:not(:focus):not(:placeholder-shown):invalid {
  border-color: red;
}

Bu kadar kod kalabalığı gerektirmeyen bir çözüm olarak tarayıcılar bizlere :user-invalid sözde sınıfını sundu. En son Chrome’un da desteklemesi sonrası kullanılabilir hale geldi.

input:user-invalid {
  border-color: red;
}

Basit ve kolay bir kod.

Form doğrulama konusu bazen çok karmaşık haller alabiliyor. Burada herkesin ortak noktada birleştiği tarayıcıların kendi içinde halletiği bir çözüm bizi rahatlatacaktır. Tarayıcıların bu konuda geliştirmeleri var ancak hala bazı eksikleri var. Progressively Enhanced Form Validation konu hakkında detaylı ve güzel bir yazı.

Tarayıcı Desteği

Şu anlık %66’lık bir destek var ama Chrome yeni destek açıkladığı için. 1-2 aya yüzdeler artar.

Tarayıcı Desteği

Chrome explorer Firefox
+ - +

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+ + -

Kalın sağlıcakla.

Kaynaklar

HTML Akordiyon bileşeni

HTML Akordiyon bileşeni ve uygulalamarı Devamını oku

Avatar Popout Efekti

06 February 2024 tarihinde yayınlandı.

Kapsayıcı sorguları (container query)

29 January 2024 tarihinde yayınlandı.