: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.

La pseudo-classe :valid permet de cibler tout élément <input> ou <form> dont la validation du contenu s'effectue correctement par rapport au type de donnée attendu. On peut ainsi facilement mettre en forme les champs correctement remplis par l'utilisateur.

css
input:valid {
  background-color: #ddffdd;
}

Syntaxe

Error: could not find syntax for this item

Exemples

Cet exemple présente un formulaire dont les éléments se colorent en vert lorsqu'ils sont valides et en rouge lorsqu'ils sont invalides.

CSS

css
input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:valid {
  border-color: #008000;
}

HTML

html
<form>
  <label>Veuillez saisir une URL :</label>
  <input type="url" />
  <br />
  <br />
  <label>Veuillez saisir une adresse électronique :</label>
  <input type="email" required />
</form>

Résultat

Accessibilité

La couleur rouge est généralement utilisée afin d'indiquer une valeur invalide. Les personnes ayant du mal à différencier les couleurs ne seront pas capables de déterminer la validité du champ si celui-ci n'est pas accompagné d'un indicateur qui n'est pas basé sur une couleur. Pour résoudre ce problème, on pourra utiliser un texte indicatif et/ou une icône.

Spécifications

Specification
HTML Standard
# selector-valid
Selectors Level 4
# validity-pseudos

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi