:valid

:valid ist ein Pseudo-Klassen-Selektor, der das Styling von gültigen Formularelementen ermöglicht. :valid kann zu jedem Formularelement wie <form>, <fieldset> oder <input> hinzugefügt werden, um das Styling basierend auf der Gültigkeit eines Elements oder eines enthaltenen Kindelements zu verbessern.

form:valid {
  outline: 3px dashed green;
}

Syntax

:valid {
  /* ... */
}

Obwohl die Syntax für alle Formularelemente ähnlich ist, beeinflusst die Art und Weise, wie die Validierung zwischen <form>, <fieldset> und <input> variiert, wie es funktioniert. Lassen Sie uns diese einzeln betrachten, um zu sehen, wie.

Formulare

Die Pseudo-Klasse :valid ermöglicht die bedingte Formatierung von <form>-Elementen basierend auf der Gültigkeit von untergeordneten Formularelementen wie <fieldset> oder <input>. Wenn alle untergeordneten Formularelemente gültig sind, wird das <form>-Element ebenfalls als gültig betrachtet und die bedingte Formatierung von :valid angewendet.

form:valid {
  outline: 3px dashed green;
}

Feldsets

Ähnlich wie bei <form> wendet :valid bedingt Formatierungen auf <fieldset>-Elemente an, basierend auf der Gültigkeit von untergeordneten <input>-Elementen, aber nur direkte Nachkommen, wie z. B. Radiobuttons oder Checkboxen.

fiedset:valid {
  outline: 3px dashed green;
}

Eingaben

:valid wendet bedingte Formatierungen auf <input>-Elemente an, indem der value des <input> validiert wird.

Insbesondere prüft die Validierung, ob die Eingabe mit dem required-Attribut erforderlich ist oder ob die Eingabe einem durch das pattern-Attribut beschriebenen Muster entsprechen muss. Das Hinzufügen von :valid zu <input> wendet die gleichen Stile auf alle gültigen Eingabetypen an. Die Kombination der Eingabe mit dem [type]-Attribut-Selektor ermöglicht die Formatierung spezifischer Eingabetypen.

/* All input types */
input:valid {
  outline: 3px dashed green;
}

/* Specfic input types */
input[type="text"]:valid {
  outline: 3px dashed green;
}

Barrierefreiheitsaspekte

Falls Sie erwägen, :valid zur Verbesserung des Stylings für Formularelemente zu verwenden, reicht dies möglicherweise nicht aus, um die Gültigkeit von Eingaben auf zugängliche Weise erfolgreich zu übersetzen. Berücksichtigen Sie beispielsweise, Text hinzuzufügen, der die erfolgreiche Validierung für unterstützende Geräte wie Screenreader beschreibt.

Testen auf Gültigkeit

Um das Testen auf Gültigkeit für eine Eingabe zu ermöglichen, muss die Eingabe als Pflichtfeld festgelegt werden, indem das required-Attribut auf das Feld angewendet wird.

<input type="text" id="name" name="name" required />;

Eingaben mit dem Attribut required stimmen mit dem Selektor der Pseudo-Klasse :valid überein, wenn die Eingabe einen Wert erhalten hat. Browser bieten zusätzliche Validierungstests für einige Eingabetypen. Beispielsweise erfordert die Eingabe <input type="email"> im Allgemeinen ein @ im Eingabewert, um als gültig zu gelten.

Die Gültigkeitsprüfung kann verbessert werden, indem der Eingabe ein Muster zur Verfügung gestellt wird, das der Eingabewert erfüllen *sollte*, um als gültig zu gelten. Dies kann durch die Einbeziehung des pattern-Attributs in eine Eingabe erreicht werden. Das pattern-Attribut muss ein Muster enthalten, typischerweise in einem Reguläre-Ausdrücke-Format, um den bereitgestellten Wert zu testen.

<input type="text" id="zipcode" name="zipcode" pattern="[0-9]{5}" inputmode="numeric" required />

Kettung von Pseudo-Klassen

Die Pseudo-Klasse :valid kann an andere Pseudo-Klassen-Selektoren wie :focus oder :hover angehängt werden, um die Formatierung weiter anzupassen.

.input:focus:valid {
    outline: 3px dashed green;
}

Verwendung mit :has()

Da der funktionale Pseudo-Klassen-Selektor :has() in Browsern weit verbreitet ist, kann er in Verbindung mit Gültigkeits-Pseudo-Klassen-Selektoren verwendet werden, um anderen Elementen die Vorteile der bedingten Formatierung von Formularelementen zu ermöglichen.

Zum Beispiel können wir ein Elternelement formatieren, das ein :valid-Eingabefeld enthält

div:has(input:valid) {
  outline: 3px solid green;
}

Wir könnten dies sogar auf das <form>-Element selbst beschränken, so dass die Formatierung angewendet wird, wenn es irgendwo ein :valid-Element enthält.

form:has(:valid) {
  /* If :valid is present anywhere in the form. */
}

Spezifikation

:valid wird in der CSS Selectors Level 4 Spezifikation als „Gültigkeits-Pseudo-Klasse“ definiert, was bedeutet, dass sie zur Formatierung interaktiver Elemente basierend auf einer Auswertung der Benutzereingabe verwendet wird.

Browser-Unterstützung

Verwandte Artikel

Zusätzliche Ressourcen

• Mozilla Developer Network – :valid
• W3C – Selectors Level 4
• HTML-Spezifikation – :valid
• W3C Use of Color, Understanding Success Criterion 1.4.1

Verwandt