:user-valid
: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.