CSS : valid : invalid und :required Pseudoklassen

CSS Pseudo Selektoren (Pseudoklassen) valid invalid für input-Felder von Formularen

Die CSS Pseudoklassen :valid und :invalid erkennen, ob Formularfelder entsprechend ihres Typs und ihrer Attribute korrekt ausgefüllt sind oder nicht. valid und invalid sind keine vorgeschaltete Validierung der Formulardaten, sondern ein schneller und unkomplizierter Hinweis für den Benutzer.

Die endgültige Validierung der Eingaben muss in der verarbeitenden Anwendung durchgeführt werden.

CSS :valid ist keine Validierung

Selbst das kleinste Formular kommt dem Benutzer besser entgegen, wenn die Eingaben schon im Browser des Benutzers geprüft werden. Das war in der Vergangenheit die Domaine von Javascript. Auf der einen Seite ist Javascript nicht Jedermanns Sache, auf der anderen Seite ist das Prüfen der Eingaben mit Javascript alles andere als intuitiv.

Die drei Pseudoklassen :valid, :invalid und :required hingegen sind kurz und machen die erste Prüfung einfach.

Wann Benutzereingaben als korrekt gelten, entscheiden der Typ des Eingabefelds (z.B. type="email") und Attribute wie required, min, max und pattern (regulärer Ausdruck wie d+ als Muster für richtige Eingaben).



CSS :valid / :invalid
input[type="email"]:valid { border: 2px solid green }
input[type="email"]:focus:invalid { border: 2px solid red }
HTML input type email
<input type="email" placeholder="Email" />
<input type="email" required placeholder="Email (erforderlich)" />	

Ein Feld, das nicht durch required als erforderlich gekennzeichnet ist, gilt demnach als korrekt ausgefüllt.

:invalid kann durch einen zusätzlichen Pseudoselektor enger gefasst werden. Mit :focus wird das Feld nur gekennzeichnet, wenn es aktiv ist.

:required

elem:required kennzeichnet Felder, in denen das Attribut required gesetzt ist, als erforderliche Eingabe.



HTML input required
<input class="plz" type="number" required placeholder="PLZ" />
CSS : required
input[type="number"]:required { 
    border-bottom: 2px solid red;
}
:valid :invalid