Die Pseudoklassen „:user-valid“ und „:user-invalid“

Die Eingabe der Nutzer gehört zu den sensibelsten Belangen einer Benutzeroberfläche. Eine brauchbare Anwendung muss Nutzern helfen, Fehler in ihrer Eingabe zu sehen, zu verstehen und zu beheben. Die Pseudoklassenselektoren :user-valid und :user-invalid verbessern die Nutzerfreundlichkeit der Eingabevalidierung, da sie erst Feedback zu Fehlern geben, nachdem ein Nutzer die Eingabe geändert hat. Mit diesen neuen Selektoren muss kein zustandsorientierter Code mehr geschrieben werden, um Eingaben eines Nutzers nachzuverfolgen.

Pseudoklassenselektoren für die Nutzerinteraktion

Die Pseudoklassenselektoren :user-valid und :user-invalid ähneln den vorhandenen Pseudoklassen :valid und :invalid. Beide stimmen mit einer Formularsteuerung überein, je nachdem, ob ihr aktueller Wert die Validierungseinschränkungen erfüllt. Die neuen Pseudoklassen :user-valid und :user-invalid haben jedoch den Vorteil, dass sie nur dann einer Formularsteuerung entsprechen, wenn ein Nutzer erheblich mit der Eingabe interagiert hat.

Wenn ein Steuerelement erforderlich und leer ist, entspricht es :invalid, auch wenn ein Nutzer noch nicht mit der Seite interagiert. Dasselbe Formularsteuerelement stimmt jedoch erst mit :user-invalid überein, wenn der Nutzer die Eingabe geändert und im ungültigen Status belassen hat.

Die Pseudoklassen :user-valid und :user-invalid verwenden

Verwenden Sie diese Pseudoklassen, um Eingabe-, Auswahl- und Textbereichssteuerelemente zu gestalten, wie in den folgenden Beispielen gezeigt:

input:user-valid,
select:user-valid,
textarea:user-valid {
  border-color: green;
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  border-color: red;
}

<input required="required" />

<select required="required">
  <option value="">Choose an option</option>
  <option value="1">One</option>
</select>

<textarea required="required"></textarea>

Die Selektoren stimmen anhand einer Kombination aus Nutzerinteraktionen und Validierungseinschränkungen überein. Sehen Sie sich die folgende Demo an, um sie in Aktion zu sehen:

Bessere User Experience mit weniger Code

Ohne diese Pseudoklassen musste zum Erreichen der durch :user-valid und :user-invalid ermöglichten Nutzererfahrung zusätzlicher zustandsorientierter Code geschrieben werden. Dieser Code war erforderlich, um den Anfangswert, den aktuellen Fokusstatus der Eingabe und das Ausmaß der Wertänderungen durch den Nutzer zu verfolgen, eine zusätzliche Gültigkeitsprüfung durchzuführen und schließlich eine Klasse für die Gestaltung hinzuzufügen. Sie können sich jetzt darauf verlassen, dass der Browser all dies automatisch erledigt.

Weitere Ressourcen

• :user-valid – MDN-Webdokumentation
• :user-Ungültig – MDN-Webdokumentation
• Pseudoklassen zur Nutzerinteraktion – W3C-Editorentwurf
• Formulareinschränkung – MDN-Webdokumentation
• Anleitung zur Barrierefreiheit in Google Formulare – Initiative zur Barrierefreiheit im Internet

Titelbild von Behzad Ghaffarian auf Unsplash.