:valid CSS Pseudoklasse
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die :valid CSS Pseudoklasse repräsentiert jedes <input> oder ein anderes <form> Element, dessen Inhalt erfolgreich validiert wird. Dies ermöglicht es, dass gültige Felder ein Aussehen annehmen, das dem Benutzer hilft, zu bestätigen, dass seine Daten richtig formatiert sind.
Probieren Sie es aus
label {
display: block;
margin-top: 1em;
}
input:valid {
background-color: ivory;
border: none;
outline: 2px solid deepskyblue;
border-radius: 5px;
accent-color: gold;
}
<form>
<label for="email">Email Address:</label>
<input id="email" name="email" type="email" value="na@me@example.com" />
<label for="secret">Secret Code: (lower case letters)</label>
<input id="secret" name="secret" type="text" value="test" pattern="[a-z]+" />
<label for="age">Your age: (18+)</label>
<input id="age" name="age" type="number" value="5" min="18" />
<label
><input name="tos" type="checkbox" required checked /> - Do you agree to
ToS?</label
>
</form>
Diese Pseudoklasse ist nützlich, um dem Benutzer die korrekten Felder hervorzuheben.
Syntax
:valid {
/* ... */
}
Barrierefreiheit
Die Farbe Grün wird häufig verwendet, um gültige Eingaben anzuzeigen. Personen, die an bestimmten Formen der Farbenblindheit leiden, können den Zustand der Eingabe nicht erkennen, es sei denn, es gibt einen zusätzlichen Indikator, der nicht auf Farbe angewiesen ist, um Bedeutung zu vermitteln. Typischerweise werden beschreibender Text und/oder ein Symbol verwendet.
Beispiele
Gültige und ungültige Formularfelder anzeigen
In diesem Beispiel fügen wir zusätzliche <span> Elemente hinzu, um Inhalt zu erzeugen, der gültige oder ungültige Daten anzeigt:
<form>
<fieldset>
<legend>Feedback form</legend>
<p>Required fields are labelled with "required".</p>
<div>
<label for="fname">First name: </label>
<input id="fname" name="fname" type="text" required />
<span></span>
</div>
<div>
<label for="lname">Last name: </label>
<input id="lname" name="lname" type="text" required />
<span></span>
</div>
<div>
<label for="email">
Email address (include if you want a response):
</label>
<input id="email" name="email" type="email" />
<span></span>
</div>
<div><button>Submit</button></div>
</fieldset>
</form>
Um diese Indikatoren bereitzustellen, verwenden wir folgendes 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 erzeugten Inhalt relativ zu ihnen positionieren können. Dann positionieren wir je nach Validität der Formulardaten unterschiedlichen erzeugten Inhalt absolut — ein grünes Häkchen oder ein rotes Kreuz. Um der ungültigen Dateneingabe etwas mehr Dringlichkeit zu verleihen, haben wir den Eingaben bei Ungültigkeit auch einen dicken roten Rand gegeben.
Hinweis:
Wir haben ::before verwendet, um diese Labels hinzuzufügen, da wir ::after bereits für die "erforderlich"-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 werden, wenn sie gefüllt sind. Die E-Mail-Eingabe hingegen ist gültig, wenn sie leer ist, da sie nicht erforderlich ist, aber ungültig, wenn sie etwas enthält, das keine ordnungsgemäße E-Mail-Adresse ist.
Spezifikationen
| Spezifikation |
|---|
| HTML # selector-valid |
| Selectors Level 4 # valid-pseudo |
Browser-Kompatibilität
Siehe auch
- Andere validierungsbezogene Pseudoklassen:
:required,:optional,:invalid - Formulardatenvalidierung
- Zugriff auf den validity state von JavaScript aus