CSS-Pseudoklassen : valid : invalid und :required

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 Pseudo Selektoren (Pseudoklassen) valid invalid für input-Felder von Formularen

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.

Ob 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 [0-9]{5} als Muster für die richtige Eingabe einer Postleitzahl).



input[type="email"]:valid { border: 2px solid green }
input[type="email"]:focus:invalid { border: 2px solid red }
<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.



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

Da pattern-Attribut des input-Tags kann gleich bei der Eingabe signalisieren, ob tatsächlich eine valide Postleitzahl angegeben wird, und zwar ohne Javascript oder serverseitige Programmierung.

Suchen auf mediaevent.de