Mit dem :validSelektor können Sie Elemente auswählen , die gültigen Inhalt enthalten, wie durch sein typeAttribut bestimmt. :validwird in der CSS Selectors Level 3-Spezifikation als „Gültigkeits-Pseudo-Selektor“ definiert. Dies bedeutet, dass interaktive Elemente basierend auf einer Auswertung der Benutzereingaben formatiert werden.
Dieser Selektor hat eine besondere Verwendung: Er gibt einem Benutzer Feedback, während er mit einem Formular auf der Seite interagiert. Im folgenden Beispiel wird CSS verwendet, um die Felder "E-Mail" rot oder grün zu machen und zu reagieren, ob der Inhalt mit einem gültigen E-Mail-Adressmuster übereinstimmt oder nicht:
Siehe den Stift: gültige &: ungültige Eingaben von Chris Coyier (@chriscoyier) auf CodePen
Beachten Sie, dass die erste ("E-Mail") grün gültig ist, auch wenn das Feld keinen Inhalt enthält. Dies liegt daran, dass die Eingabe optional ist. Wenn Sie sie leer lassen, wird ein gültiges Formular gesendet. Um dieses Verhalten zu beheben, verfügt das zweite über ein "erforderliches" Attribut. Dies bedeutet, dass ein leeres Feld zu einer ungültigen Formularübermittlung führen würde.
Sehenswürdigkeiten
:validkann mit anderen Pseudo-Selektoren „verkettet“ werden: Sie möchten:focusnur validieren, wenn der Benutzer tippt,:beforeoder:afterSymbole oder Text generieren, um mehr Benutzer-Feedback zu geben, oder Attribut-Selektoren möchteninput(value="")nur Eingabefelder validieren, die Inhalt enthalten.
Browser-Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10.0+ | 5.0+ | 4.0+ | 10.0+ | 10+ | 5+ | 2+ |
:validwurde in CSS Selectors Module 3 eingeführt, was bedeutet, dass alte Versionen von Browsern dies nicht unterstützen. Die moderne Browserunterstützung wird jedoch immer besser. Wenn Sie ältere Browserunterstützung benötigen, entweder Polyfill, oder verwenden Sie diese Selektoren auf unkritische Weise á la progressive Verbesserung, was empfohlen wird.