Formular-Validierung mit :user-valid und :user-invalid

Wusstest du, dass du per HTML und CSS ein Textfeld validieren und schon vor dem Klick auf Absenden kennzeichnen kannst? Lange war dafür Javascript nötig — heute reichen die Pseudo-Klassen :user-valid und :user-invalid.

Ein einfaches Beispiel

Ein Textfeld mit type="email" erwartet eine gültige E-Mail-Adresse. Mit den folgenden Anweisungen wird der Rahmen bei Fokus blau. Entspricht die Eingabe einer Mail-Adresse, wird sie grün gekennzeichnet — wenn nicht, rot:

.widget-text {
  input {
    &:focus {
      border: 1px solid blue;
    }

    &:user-valid {
      outline: 1px solid green;
    }

    &:user-invalid {
      outline: 1px solid red;
    }
  }
}

Warum :user-valid statt :valid?

Es gibt auch eine :valid-Pseudo-Klasse. Der Vorteil von :user-valid: Die Anweisungen greifen erst, nachdem das Feld erstmalig fokussiert wurde — der Rahmen kann also vorher neutral (z. B. grau) bleiben, statt ein leeres Formular schon als fehlerhaft zu markieren.

Barrierefreiheit

Farbe allein reicht als Kennzeichnung nicht aus. Zusätzlich zum farbigen Rahmen kannst du mit Häkchen- (✅) und Kreuz-Icons (❌) arbeiten — auch hier ist :has() wieder dein Freund.

Verwandte Tipps

Mit :has(), :not() und :placeholder-shown lässt sich auch eine Placeholder-Label-Kombination ohne Javascript umsetzen.