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

Feiern: Diese Webfunktion ist jetzt in allen drei Browser-Engines verfügbar.

:user-valid

Unterstützte Browser

• 119
• 119
• 88
• 16.5

Quelle

:user-invalid

Unterstützte Browser

• 119
• 119
• 88
• 16.5

Quelle

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.

Pseudoklassenauswahl 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. Dasselbe Formularkontrollelement entspricht jedoch erst dann :user-invalid, 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.