Formularvalidierungs-Styling bei Eingabefokus

/* Only show invalid ring while not focused */
input:not(:focus):not(:placeholder-shown):invalid {
  border-color: var(--color-invalid);
}
input:not(:focus):not(:placeholder-shown):invalid ~ .error-message {
  display: block;	
}

/* Only show valid ring while not focused and if a value is entered */
/* :empty won't work here as that targets elements that have no childeren. Therefore we abuse :placeholder-shown */
input:not(:focus):not(:placeholder-shown):valid {
  border-color: var(--color-valid);
}

Dies stammt direkt aus den Weekly Platform News, wo Šime Vidas zwei lang andauernde Probleme mit der Verwendung von :invalid zum Stylen der Formular-Input-Validierung behandelt. Anscheinend passiert Folgendes...

• [inputs] werden :invalid, während der Benutzer noch den Wert eingibt.
• Wenn ein Formularfeld erforderlich ist (), wird es sofort nach dem Laden der Seite :invalid.

Beide Verhaltensweisen sind potenziell verwirrend (und nervig), daher können sich Websites nicht allein auf den :invalid-Selektor verlassen, um anzuzeigen, dass ein vom Benutzer eingegebener Wert nicht gültig ist. Es besteht jedoch die Möglichkeit, :invalid mit :not(:focus) und sogar :not(:placeholder-shown) zu kombinieren, um sicherzustellen, dass die "ungültigen" Stile der Seite nicht auf das ＜input＞ angewendet werden, bis der Benutzer die Eingabe abgeschlossen und den Fokus auf ein anderes Element verschoben hat.

Ryan Florence fasst dies in einem Tweet gut zusammen

Ich bevorzuge es, wenn Formulare auf das Blur warten, bevor sie ausflippen 🤨 pic.twitter.com/aLKVovpCao

— Ryan Florence (@ryanflorence) 27. Januar 2021

Dieser Snippet verbessert also :invalid, indem er es mit :not(:focus) und :not(:placeholder-shown) kombiniert.

Was bedeutet das? Übersetzen wir den Code in etwas Lesbareres.

input:not(:focus):not(:placeholder-shown):invalid {}

Wenn ein Eingabefeld nicht im Fokus ist, sein Platzhaltertext nicht angezeigt wird und der eingegebene Text ungültig ist... dann kannst du diese Stile verwenden.

Mit anderen Worten, dies verhindert, dass der ungültige Stil angewendet wird, bis Text eingegeben wurde und der Fokus auf ein anderes Element verschoben wurde.

input:not(:focus):not(:placeholder-shown):invalid ~ .error-message

Hey, lass uns die Fehlermeldung anzeigen, wenn die gleichen Bedingungen erfüllt sind.

Dies ist exakt dasselbe wie oben, wählt aber eine .error-message Klasse aus und setzt sie von display: none auf display: block, nur nachdem der Text eingegeben wurde und der Fokus vom Eingabefeld auf etwas anderes verschoben wurde.

input:not(:focus):not(:placeholder-shown):valid

Oh, der eingegebene Text ist gültig? Okay, lass uns stattdessen diese Stile anwenden.

Wieder die gleiche Art von Bedingung, aber an :valid statt :invalid gekettet. Auf diese Weise können wir dem Benutzer einen anderen Satz von Stilen geben, um anzuzeigen, dass das, was sie eingegeben haben, in Ordnung ist!

Laut Šime könnte eine solche Snippet in Zukunft unnötig sein, da verstärkt auf :user-invalid und :user-valid gedrängt wird. Firefox beabsichtigt bereits, seine ungeprefixte Lösung zu liefern. Tickets sind offen, um dasselbe in Safari und Chrome zu tun.