Veröffentlicht: 8. November 2023
Nutzereingaben sind eines der heikelsten Themen bei jeder Benutzeroberfläche. Eine nutzerfreundliche Anwendung muss Nutzern helfen, Fehler in ihren Eingaben zu erkennen, zu verstehen und zu korrigieren. Die Pseudoklassen-Selektoren :user-valid
und :user-invalid
tragen dazu bei, die Nutzerfreundlichkeit der Eingabevalidierung zu verbessern, indem nur dann Feedback zu Fehlern gegeben wird, wenn ein Nutzer die Eingabe geändert hat. Mit diesen neuen Auswahlschaltern müssen Sie keinen zustandsabhängigen Code mehr schreiben, um die Eingaben eines Nutzers im Blick zu behalten.
Pseudoklassen-Selektoren für Nutzerinteraktionen
Die Pseudoklassen-Selektoren :user-valid
und :user-invalid
ähneln den vorhandenen Pseudoklassen :valid
und :invalid
. Beide werden mit einem Formularkontrollelement abgeglichen, je nachdem, ob der aktuelle Wert die Validierungsbeschränkungen erfüllt. Der Vorteil der neuen Pseudoklassen :user-valid
und :user-invalid
besteht jedoch darin, dass sie erst dann mit einem Formularkontrollelement übereinstimmen, wenn ein Nutzer signifikant mit der Eingabe interagiert hat.
Ein Pflichtfeld, das leer ist, entspricht :invalid
, auch wenn ein Nutzer noch nicht mit der Seite interagiert hat. Dieses Formularkontrollelement stimmt jedoch erst dann mit :user-invalid
überein, wenn der Nutzer die Eingabe geändert und in einem ungültigen Status belassen hat.
Pseudoklassen :user-valid
und :user-invalid
verwenden
Verwenden Sie diese Pseudoklassen, um Eingabe-, Auswahl- und Textfeld-Steuerelemente zu formatieren, 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 Auswahl erfolgt anhand einer Kombination aus Nutzerinteraktionen und Validierungsbeschränkungen. In der folgenden Demo können Sie die Funktion ausprobieren:
Bessere Nutzerfreundlichkeit mit weniger Code
Ohne diese Pseudoklassen wäre es erforderlich gewesen, zusätzlichen zustandsabhängigen Code zu schreiben, um die Nutzerfreundlichkeit von :user-valid
und :user-invalid
zu ermöglichen. Dieser Code musste den Anfangswert, den aktuellen Fokusstatus der Eingabe, den Umfang der Änderungen des Nutzers am Wert im Auge behalten, eine zusätzliche Gültigkeitsprüfung ausführen und schließlich eine Klasse für das Styling hinzufügen. Der Browser übernimmt das jetzt automatisch.
Weitere Ressourcen
- :user-valid – MDN Web Docs
- :user-invalid – MDN Web Docs
- Pseudoklassen für Nutzerinteraktionen – W3C-Entwurf des Editors
- Form Constraint Validation – MDN Web Docs
- Anleitung zur Barrierefreiheit von Formularen – Web Accessibility Initiative
Titelbild von Behzad Ghaffarian auf Unsplash.