:user-valid ve :user-invalid sözde sınıfları

Kullanıcı girişi, herhangi bir kullanıcı arayüzündeki en hassas konulardan biridir. Kullanılabilir bir uygulama, kullanıcıların girişlerindeki hataları görmelerine, anlamalarına ve düzeltmelerine yardımcı olmalıdır. :user-valid ve :user-invalid sözde sınıf seçicileri iyileştirmeye yardımcı olur yalnızca hatalarla ilgili geri bildirim vererek giriş doğrulama kullanıcı deneyimi kullanıcı girişi değiştirdikten sonra. Bu yeni seçicilerle, bir kullanıcının değiştirdiği girişi takip etmek için durum bilgili kod yazmamız gerekir.

Kullanıcı etkileşimi sözde sınıf seçicileri

:user-valid ve :user-invalid sözde sınıf seçicileri, mevcut :valid ve :invalid sözde sınıflarına benzer. Her ikisi de form kontrolüne dayalı mevcut değerinin doğrulama kısıtlamalarını karşılayıp karşılamadığına göre kontrol eder. Ancak avantajı, yeni :user-valid ve :user-invalid sözde sınıflarının avantajıdır: ancak kullanıcı önemli ölçüde etkileşimde bulunduktan sonra bir form kontrolüyle eşleşiyorsa girdi.

Zorunlu ve boş bir form denetimi, kullanıcı sayfayla etkileşime geçmeye başlamamış olsa bile :invalid ile eşleşir. Ancak aynı form kontrolü, kullanıcı girişi değiştirip:user-invalid geçersiz durum.

:user-valid ve :user-invalid sözde sınıflarını kullanma

Gösterildiği gibi giriş, seçim ve metin alanı denetimlerine stil eklemek için bu sözde sınıfları kullanın aşağıdaki örneklerde:

input:user-valid,
select:user-valid,
textarea:user-valid {
  border-color: green;
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  border-color: red;
}

<input required="required" />

<select required="required">
  <option value="">Choose an option</option>
  <option value="1">One</option>
</select>

<textarea required="required"></textarea>

Seçiciler, kullanıcı etkileşimlerinin ve doğrulama kısıtlamalarının bir kombinasyonuna göre eşleştirilir. Uygulamalarını görmek için aşağıdaki demoyu izleyin:

Daha az kodla daha iyi kullanıcı deneyimi

Bu sözde sınıflar olmadan, :user-valid ve :user-invalid tarafından sağlanan kullanıcı deneyimine ulaşmak için ek durum bilgisi içeren kod yazmak gerekiyordu. O için gereken kodu (yani ilk değeri, mevcut odak durumunu) kullanıcının değerde yaptığı değişikliklerin kapsamını, ekstra bir geçerlilik kontrol edin ve son olarak, stil olarak seçilecek bir sınıf ekleyin. Artık RACI matrisleri otomatik olarak oluşturacaktır.

Diğer kaynaklar

• :user-geçerli - MDN web belgeleri
• :user-invalid - MDN web docs
• Kullanıcı Etkileşimi Sözde Sınıfları - W3C Düzenleyici Taslağı
• Form Kısıtlaması Doğrulama - MDN web belgeleri
• Formlar Erişilebilirlik Eğiticisi - Web Erişilebilirlik İnisiyatifi

Unsplash'taki Behzad Ghaffarian tarafından çekilen kapak fotoğrafı.