:validSeçici seçmenize olanak sağlar onun belirlediği şekilde, geçerli içerik barındıran unsurlar typeözniteliği. :validCSS Seçiciler Seviye 3 spesifikasyonunda "geçerlilik sözde seçici" olarak tanımlanmıştır, yani kullanıcı girdisinin değerlendirmesine dayalı olarak etkileşimli öğelerin stilini belirlemek için kullanılır.
Bu seçicinin belirli bir kullanımı vardır: bir kullanıcıya sayfadaki bir formla etkileşim halindeyken geri bildirim sağlamak. Aşağıdaki örnek, içeriğin geçerli bir e-posta adresi kalıbıyla eşleşip eşleşmediğine yanıt vererek "E-posta" alanlarını kırmızıya veya yeşile çevirmek için CSS kullanır:
Kaleme bakın: geçerli &: CodePen'de Chris Coyier (@chriscoyier) tarafından geçersiz girişler
Alanda içerik olmasa bile ilkinin ("E-posta") nasıl yeşil-geçerli olduğuna dikkat edin. Bunun nedeni girişin isteğe bağlı olmasıdır, bu nedenle boş bırakılması geçerli bir form gönderimi ile sonuçlanacaktır. Bu davranışı düzeltmek için, ikincisi "gerekli" özniteliğe sahiptir, bu da boş bir alanın geçersiz bir form gönderimine neden olacağı anlamına gelir.
İlgi noktaları
:validdiğer psödo-selektörlü “zincirleme” olabilir: gibi:focustek doğrulamak için kullanıcı yazarak olduğu zaman:beforeya da:afterbenzeri fazla kullanıcı geri besleme, veya nitelik seçiciler sağlamak için simgeler veya metin oluşturmak içininput(value="")içerik ihtiva eden tek doğrulamak giriş alanlarına.
Tarayıcı Desteği
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10.0+ | 5.0+ | 4.0+ | 10.0+ | 10+ | 5+ | 2+ |
:validCSS Seçiciler Modül 3'te tanıtıldı, yani tarayıcıların eski sürümleri onu desteklemiyor. Ancak modern tarayıcı desteği daha iyi hale geliyor. Daha eski bir tarayıcı desteğine ihtiyacınız varsa, ya çoklu doldurma ya da bu seçicileri kritik olmayan şekillerde, yani aşamalı geliştirme olarak kullanın.