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).
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;
}
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.