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

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. Die Vorteil der neuen Pseudoklassen :user-valid und :user-invalid besteht darin, Sie stimmen erst dann mit einem Formularsteuerelement überein, wenn ein Nutzer signifikant mit die Eingabe.

Ein Pflichtfeld, das leer ist, entspricht :invalid, auch wenn ein Nutzer noch nicht mit der Seite interagiert hat. Dieses Formularsteuerelement wird jedoch nicht Übereinstimmung mit :user-invalid, bis der Nutzer die Eingabe geändert und in einer Ungültiger Status.

Pseudoklassen :user-valid und :user-invalid verwenden

Verwenden Sie diese Pseudoklassen, um Eingabe-, Auswahl- und Textbereichssteuerelemente zu gestalten (siehe Abbildung). in den folgenden Beispielen:

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 auf Grundlage einer Kombination aus Nutzerinteraktionen und Validierung überein. Einschrä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. Das Code, der erforderlich ist, um den Anfangswert, den aktuellen Fokusstatus der Eingabe, den Umfang der Nutzeränderungen am Wert, eine zusätzliche Gültigkeit ausführen und fügen Sie schließlich eine Klasse hinzu, die Sie für die Gestaltung auswählen können. Der Browser übernimmt das jetzt automatisch.

Weitere Ressourcen

• :user-valid – MDN Web Docs
• :user-ungültig – MDN-Webdokumente
• Pseudoklassen mit Nutzerinteraktion – Entwurf des W3C-Editors
• Validierung von Formulareinschränkungen – MDN-Webdokumente
• Anleitung zur Barrierefreiheit von Formularen – Web Accessibility Initiative

Titelbild von Behzad Ghaffarian auf Unsplash.