:invalid

:invalid ist ein Pseudo-Klassen-Selektor, der das Styling ungültiger Formularelemente ermöglicht. :invalid kann zu jedem Formularelement hinzugefügt werden, wie z. B. form, fieldset oder input, um das Styling basierend auf der Gültigkeit eines Elements oder eines enthaltenen Kindelements zu verbessern.

form:invalid {
  outline: 3px dashed red;
}

Syntax

:invalid {
  /* ... */
}

Obwohl die Syntax für alle Formularelemente ähnlich ist, unterscheidet sich die Validierung leicht zwischen form, fieldset und input. Diese Unterschiede werden wir in den folgenden Abschnitten untersuchen.

Formulare

form-Elemente ermöglichen bedingtes Styling mit :invalid basierend auf der Gültigkeit von untergeordneten Formularelementen wie fieldset oder input. Wenn ein untergeordnetes Formularelement ungültig ist, wird das form ebenfalls als ungültig betrachtet und das bedingte Styling :invalid angewendet.

form:invalid {
  outline: 3px dashed red;
}

Feldsets

Ähnlich wie bei form ermöglicht fieldset bedingtes Styling mit :invalid basierend auf der Gültigkeit von untergeordneten input-Elementen, wie z. B. Radio- oder Checkbox-Inputs.

fiedset:invalid {
    outline: 3px dashed red;
}

Inputs

input-Elemente ermöglichen bedingtes Styling mit :invalid, indem sie den value des input validieren.

Die Validierung prüft, ob der Eingabewert mit dem Attribut required erforderlich ist oder ob der Eingabewert mit dem durch das Attribut pattern beschriebenen Muster übereinstimmen muss.

Das Hinzufügen von :invalid zu input wendet dieselben Stile auf alle ungültigen Eingabetypen an. Die Verknüpfung des Inputs mit dem Attributselektor [type] ermöglicht das Styling spezifischer Eingabetypen.

/* All input types */
input:invalid {
    outline: 3px dashed red;
}

/* Specific input types */
input[type="text"]:invalid {
    outline: 3px dashed red;
}

Verwendung

Barrierefreiheitsüberlegung

Obwohl :invalid ein verbessertes Styling für Formularelemente ermöglicht, reicht dies möglicherweise nicht aus, um die Gültigkeit von Eingaben barrierefrei zu übersetzen.

Zusätzlich zum Styling des Inputs sollten Sie in Erwägung ziehen, Text hinzuzufügen, der die ungültige Validierung für assistive Geräte beschreibt.

Testen auf Gültigkeit

Um das Testen der Validierung eines Inputs zu ermöglichen, muss der Input als Pflichtfeld festgelegt werden, indem das Attribut required auf das Feld angewendet wird.

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

Inputs mit dem Attribut required passen zum Pseudo-Klassen-Selektor :invalid, wenn dem Input kein Wert zugewiesen wurde.

Browser führen zusätzliche Validierungstests für einige Eingabetypen durch. Zum Beispiel erfordern Eingabetypen vom Typ E-Mail im Allgemeinen ein @ im Wert des Inputs, um als gültig zu gelten.

Die Validierung kann durch die Angabe eines Musters, dem der Wert entsprechen muss, um als gültig zu gelten, verbessert werden. Dies kann durch die Einbeziehung des Attributs pattern in einen Input erreicht werden.

Das Attribut pattern muss mit einem Muster versehen werden, typischerweise im Format eines Regulären Ausdrucks, um den bereitgestellten Wert zu testen.

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

Verkettung von Pseudo-Klassen

Die Pseudo-Klasse :invalid kann mit anderen Pseudo-Klassen-Selektoren wie :focus oder :hover verkettet werden, um das Styling weiter anzupassen.

.input:focus:invalid {
    outline: 3px dashed red;
}

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 zu ermöglichen, von bedingtem Styling für Formularelemente zu profitieren.

Um ein Elternelement zu stylen, das einen ungültigen Input enthält

div:has(input:invalid) {
  outline: 3px solid red;
}

Spezifikation

:invalid ist in der CSS Selectors Level 4 Spezifikation als „Gültigkeits-Pseudo-Klasse“ definiert, was bedeutet, dass sie zur Gestaltung interaktiver Elemente auf der Grundlage einer Auswertung von Benutzereingaben verwendet wird.

Browser-Unterstützung

Verwandte Artikel

Zusätzliche Ressourcen

• Mozilla Developer Network – :invalid
• W3C – Selectors Level 4
• HTML-Spezifikation – :invalid
• W3C Farbe: Verwendung, Verständnis von Erfolgskriterium 1.4.1

Verwandt