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

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>

Ein Bild, das drei Screenshots nebeneinander zum Vergleich zeigt. Auf jedem Screenshot ist ein Webformular mit denselben Eingabe-, Auswahl- und Textfeld-Steuerelementen zu sehen. Der erste Screenshot zeigt das Formular in seinem ursprünglichen Zustand, bevor Nutzer etwas eingegeben haben. Die Steuerelementränder sind grau und im Hilfetext unten wird erklärt, dass jedes Steuerelement derzeit mit der Pseudoklassselektor-Option „:invalid“ übereinstimmt. Der zweite Screenshot zeigt dasselbe Formular, nachdem ein Nutzer Eingaben in die einzelnen Steuerelemente gemacht hat. Die Steuerelementränder sind grün und im Hilfetext unten wird erklärt, dass jedes Steuerelement derzeit sowohl mit den Pseudoklassen-Selektoren :valid als auch :user-valid übereinstimmt. Der dritte und letzte Screenshot zeigt dasselbe Formular, nachdem ein Nutzer alle Eingaben entfernt hat. Die Steuerelementränder sind rot und im Hilfetext unten wird erklärt, dass jedes Steuerelement derzeit sowohl mit den Pseudoklassen-Selektoren :invalid als auch :user-invalid übereinstimmt.

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

Titelbild von Behzad Ghaffarian auf Unsplash.