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

Yayınlanma tarihi: 8 Kasım 2023

Kullanıcı girişi, tüm kullanıcı arayüzlerinde 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 kontrolü :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 denetimlerinin stilini belirlemek 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>

Karşılaştırma için 3 ekran görüntüsünü yan yana birleştiren bir resim. Her ekran görüntüsünde aynı giriş, seçim ve metin alanı denetimlerine sahip bir web formu gösterilmektedir. İlk ekran görüntüsü, herhangi bir kullanıcı girişi yapılmadan önceki ilk durumunu gösterir. Kontrol kenarlıkları gridir ve aşağıdaki yardım metninde, her bir kontrolün şu anda :invalid sözde sınıf seçicisiyle eşleşeceği açıklanmaktadır. İkinci ekran görüntüsü, kullanıcı her kontrol için giriş yaptıktan sonra aynı formu gösterir. Kontrol kenarlıkları yeşildir ve aşağıdaki yardım metninde, her kontrolün şu anda hem :valid hem de :user-valid sözde sınıf seçicileriyle eşleşeceği açıklanmaktadır. Üçüncü ve son ekran görüntüsü, kullanıcı tüm girişlerini kaldırdıktan sonra aynı formu gösterir. Kontrol kenarlıkları kırmızıdır ve aşağıdaki yardım metninde, her kontrolün şu anda hem :invalid hem de :user-invalid sözde sınıf seçicileriyle eşleşeceği açıklanmaktadır.

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

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