:validVolič umožňuje vybrat prvky, které obsahují platný obsah, jak je stanoveno jeho typeatributem. :validje definován ve specifikaci CSS Selectors Level 3 jako „pseudoselektor platnosti“, což znamená, že se používá ke stylu interaktivních prvků na základě vyhodnocení vstupu uživatele.
Tento selektor má jedno konkrétní použití: poskytnout uživateli zpětnou vazbu při interakci s formulářem na stránce. Následující příklad používá CSS k přepnutí polí „E-mail“ na červenou nebo zelenou, v reakci na to, zda se obsah shoduje s platným vzorem e-mailové adresy či nikoli:
Podívejte se na Pero: platné &: neplatné vstupy od Chrisa Coyiera (@chriscoyier) na CodePen
Všimněte si, jak je první („e-mail“) platný zeleně, i když v poli není žádný obsah. Důvodem je, že vstup je volitelný, takže jeho ponechání prázdné by mělo za následek platné odeslání formuláře. Chcete-li toto chování opravit, má druhý atribut „required“, což znamená, že prázdné pole by mělo za následek neplatné odeslání formuláře.
Body zájmu
:validlze „zřetězit“ s jinými pseudo-selektory: rád:focusověřuje pouze při psaní uživatelem,:beforenebo:aftergeneruje ikony nebo text, aby poskytl více zpětné vazby od uživatelů, nebo selektory atributů rádinput(value="")ověřuje pouze vstupní pole obsahující obsah.
Podpora prohlížeče
| Chrome | Safari | Firefox | Opera | TJ | Android | iOS |
|---|---|---|---|---|---|---|
| 10,0+ | 5,0+ | 4,0+ | 10,0+ | 10+ | 5+ | 2+ |
:validbyl představen v modulu CSS Selectors Module 3, což znamená, že staré verze prohlížečů jej nepodporují. Podpora moderních prohlížečů se však zlepšuje. Pokud požadujete podporu starších prohlížečů, buď polyfill, nebo použijte tyto selektory nekritickými způsoby á la progresivní vylepšení, které se doporučuje.