:valid

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die :valid CSS Pseudoklasse repräsentiert jedes <input> oder andere <form> Element, dessen Inhalt erfolgreich validiert wird. Dies ermöglicht es, gültige Felder einfach so zu gestalten, dass sie dem Benutzer helfen, zu bestätigen, dass ihre Daten richtig formatiert sind.

Probieren Sie es aus

Diese Pseudoklasse ist nützlich, um dem Benutzer korrekt ausgefüllte Felder hervorzuheben.

Syntax

css
:valid {
  /* ... */
}

Barrierefreiheit

Die Farbe Grün wird häufig verwendet, um gültige Eingaben anzuzeigen. Menschen mit bestimmten Arten von Farbenblindheit können den Zustand der Eingabe nicht erkennen, es sei denn, er wird durch einen zusätzlichen Indikator begleitet, der nicht auf Farbe angewiesen ist, um eine Bedeutung zu vermitteln. Typischerweise werden beschreibender Text und/oder ein Symbol verwendet.

Beispiele

Gültige und ungültige Formularfelder anzeigen

In diesem Beispiel verwenden wir Strukturen wie diese, die zusätzliche <span>s enthalten, um Inhalte zu generieren; wir nutzen diese, um Indikatoren für gültige/ungültige Daten bereitzustellen:

html
<div>
  <label for="fname">First name *: </label>
  <input id="fname" name="fname" type="text" required />
  <span></span>
</div>

Um diese Indikatoren bereitzustellen, verwenden wir das folgende CSS:

css
input + span {
  position: relative;
}

input + span::before {
  position: absolute;
  right: -20px;
  top: 5px;
}

input:invalid {
  border: 2px solid red;
}

input:invalid + span::before {
  content: "✖";
  color: red;
}

input:valid + span::before {
  content: "✓";
  color: green;
}

Wir setzen die <span>s auf position: relative, damit wir den generierten Inhalt relativ zu ihnen positionieren können. Wir positionieren dann verschieden generierte Inhalte je nachdem, ob die Formulardaten gültig oder ungültig sind — ein grüner Haken oder ein rotes Kreuz, jeweils. Um den ungültigen Daten etwas Dringlichkeit zu verleihen, haben wir den Eingaben auch einen dicken roten Rand gegeben, wenn sie ungültig sind.

Hinweis: Wir haben ::before verwendet, um diese Labels hinzuzufügen, da wir ::after bereits für die "required"-Labels genutzt haben.

Sie können es unten ausprobieren:

Beachten Sie, wie die erforderlichen Texteingaben ungültig sind, wenn sie leer sind, aber gültig, wenn etwas eingegeben wurde. Das E-Mail-Feld hingegen ist gültig, wenn es leer ist, da es nicht erforderlich ist, aber ungültig, wenn es etwas enthält, das keine ordnungsgemäße E-Mail-Adresse ist.

Spezifikationen

Specification
HTML Standard
# selector-valid
Selectors Level 4
# valid-pseudo

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch