:user-invalid | CSS-Tricks

Die :user-invalid ist eine CSS-Pseudoklasse, die in der CSS Selectors Level 4 Arbeitsentwurf vorgeschlagen wird und ein Formularelement basierend darauf auswählt, ob der vom Benutzer eingegebene Wert nach der Interaktion des Endbenutzers mit dem Formular über diese Eingabe hinaus gültig ist, wenn er gegen das im HTML-Markup angegebene akzeptierte Format geprüft wird. Tatsächlich wird :user-invalid als „The User Interaction Pseudo-class“ bezeichnet, da sie einzigartig bei der Identifizierung einer Benutzeraktion zur Auswahl eines Elements ist.

Betrachten Sie das folgende HTML-Markup für ein einfaches Formular mit einem numerischen Feld

<form>
  <label for="quantity"> Quantity:</label>
  <input id="quantity" max="10" min="0" type="number" value="11" />
  <!-- Rest of the form... -->
</form>

Der durch das HTML-Markup für die Eingabe festgelegte numerische Bereich liegt zwischen 1 und 10, aber der Standardwert ist auf 11 gesetzt. Das bedeutet, dass der Wert sofort nach dem Laden des Formulars ungültig ist.

Die Pseudoklasse :user-invalid wird jedoch erst wirksam, nachdem der Benutzer tatsächlich mit dem Formular interagiert hat, über die Eingabe in das Feld hinaus. Diese Interaktion ist der Unterschied zwischen :user-invalid und :invalid. Das gleiche Prinzip gilt für eingegebene Formularwerte, die durch :in-range, :out-of-range und :required gesetzt werden.

input:user-invalid {
  color: red;
}

Die folgende Abbildung veranschaulicht die verschiedenen Zustände zwischen :valid und :user-invalid basierend auf dem obigen HTML-Beispiel.

Der Unterschied zwischen einem gültigen Wert (links) und einem ungültigen Wert, der von einem Benutzer nach der Interaktion mit dem Formular eingegeben wurde.

Das Verwirrende hier ist, wie eng :invalid und :user-invalid miteinander verwandt sind. Wenn sie zusammen verwendet werden, kann es schwierig sein, die beiden zu unterscheiden

input:invalid {
  color: red;
}

input:user-invalid {
  color: red;
}

Der Unterschied zwischen `:invalid` (Mitte) und einem vom Benutzer eingegebenen ungültigen Wert (rechts) kann schwer zu unterscheiden sein

Die Verwendung des einen über das andere oder die Unterscheidung der Formatierung zwischen beiden könnte sich in einem realen Anwendungsfall als eine bessere Benutzererfahrung erweisen.

Browser können entscheiden, wie und wann Elemente übereinstimmen

Es ist erwähnenswert, dass :user-invalid Formularfelder auswählt, die :invalid, :out-of-range oder leer, aber :required sind, und zwar „zwischen dem Zeitpunkt, an dem der Benutzer versucht hat, das Formular abzuschicken, und bevor der Benutzer erneut mit dem Formularelement interagiert hat“. Die Spezifikation lässt jedoch Spielraum für Browser, eigene Entscheidungen zu treffen, wann Elemente übereinstimmen.

Benutzeragenten können es ihnen erlauben, solche Elemente zu anderen Zeiten abzugleichen, je nachdem, wie es für die Hervorhebung eines Fehlers für den Benutzer angemessen ist. Zum Beispiel kann ein UA :user-invalid so einstellen, dass es mit einem :invalid-Element übereinstimmt, sobald der Benutzer einen Text darin eingegeben und den Fokus auf ein anderes Element verschoben hat, und die Übereinstimmung erst stoppt, nachdem der Benutzer die Eingabe erfolgreich korrigiert hat.

Sobald der vom Benutzer eingegebene Wert als ungültige Eingabe ermittelt wurde, können wir das Element auswählen.

Browser-Unterstützung

Zum Zeitpunkt der Erstellung ist nur Firefox, der :user-invalid in Firefox 88 implementiert hat. Das Chromium-Projekt hat ein offenes Bug-Ticket (zeichnen Sie es!), um es in Blink-basierten Browsern (d. h. Chrome und Edge) zu implementieren. Es gibt ein offenes WebKit-Ticket, um die Unterstützung in Safari ebenfalls hinzuzufügen.

Prüfen Sie caniuse für die neuesten Browserunterstützung.