:valid
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Der :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 einfach ein Erscheinungsbild annehmen, das dem Benutzer hilft, zu bestätigen, dass ihre 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 korrekte Felder für den Benutzer hervorzuheben.
Syntax
:valid {
/* ... */
}
Barrierefreiheit
Die Farbe Grün wird häufig verwendet, um gültige Eingaben anzuzeigen. Personen mit bestimmten Arten von Farbenblindheit können den Zustand der Eingabe nicht erkennen, es sei denn, sie wird von einem zusätzlichen Indikator begleitet, der nicht auf Farbe als Bedeutungsträger angewiesen ist. Typischerweise werden beschreibender Text und/oder ein Symbol verwendet.
Beispiele
Anzeige von gültigen und ungültigen Formfeldern
In diesem Beispiel fügen wir zusätzliche <span>-Elemente hinzu, um Inhalte zu erzeugen, die gültige oder ungültige Daten anzeigen:
<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. Wir positionieren dann verschiedene erzeugte Inhalte absolut, 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 mehr 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 "erforderlichen" Labels verwendet haben.
Sie können es unten ausprobieren:
Beachten Sie, wie die erforderlichen Texteingaben ungültig sind, wenn sie leer sind, aber gültig, wenn sie etwas ausgefüllt haben. 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 richtige E-Mail-Adresse ist.
Spezifikationen
| Specification |
|---|
| HTML # selector-valid |
| Selectors Level 4 # valid-pseudo |
Browser-Kompatibilität
Siehe auch
- Andere validierungsbezogene Pseudoklassen:
:required,:optional,:invalid - Formulardatenvalidierung
- Zugriff auf den ValidityState über JavaScript