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

Kullanıcı girişi, her kullanıcı arayüzünde 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, yalnızca kullanıcı girişi değiştirdikten sonra hatalar hakkında geri bildirim vererek giriş doğrulamayla ilgili kullanıcı deneyimini iyileştirmeye yardımcı olur. Bu yeni seçicilerle, kullanıcının değiştirdiği girişi takip etmek için durum bilgisi içeren kod yazmak gerekmez.

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 geçerli değerinin doğrulama kısıtlamalarını karşılayıp karşılamadığına bağlı olarak bir form kontrolüyle eşleşir. Ancak yeni :user-valid ve :user-invalid sözde sınıflarının avantajı, yalnızca kullanıcı girişle önemli ölçüde etkileşime geçtikten sonra bir form denetimiyle eşleşmeleridir.

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

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

Aşağıdaki örneklerde gösterildiği gibi, giriş, select ve textarea denetimlerine stil uygulamak için bu sözde sınıfları kullanın:

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. Bunları çalışırken görmek için aşağıdaki demoyla etkileşime geçin:

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. Bu kod, ilk değeri, girişin mevcut odak durumunu, kullanıcının değerde yaptığı değişikliklerin kapsamını takip etmek, ek bir geçerlilik kontrolü yapmak ve son olarak stil için seçilecek bir sınıf eklemek zorundaydı. Artık tüm bunları otomatik olarak yönetmek için tarayıcıya güvenebilirsiniz.

Diğer kaynaklar

• :user-valid - MDN web docs
• :user-invalid - MDN web docs
• Kullanıcı Etkileşimi Sözde Sınıfları - W3C Düzenleyici Taslağı
• Form Kısıtlama Doğrulaması - MDN web dokümanları
• Formlar Erişilebilirlik Eğitimi - Web Erişilebilirlik Girişimi

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