:invalid

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 :invalid cible tout élément <input> pour lequel la validation du contenu échoue par rapport au type de donnée attendu. Ceci permet de mettre en forme les champs non valides pour aider l'utilisateur à identifier et à corriger les erreurs.

css
/* Cible n'importe quel élément input  */
/* dont la valeur ne satisfait pas aux */
/* critères de validation */
input:invalid {
  background-color: pink;
}

Syntaxe

Error: could not find syntax for this item

Exemple

Cet exemple présente un formulaire simple dont les éléments sont verts lors qu'ils sont valides et rouges lorsqu'ils ne le sont pas.

CSS

css
label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

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:invalid {
  border-color: #c00000;
}

HTML

html
<form>
  <div class="field">
    <label for="url_input">Veuillez saisir une URL :</label>
    <input type="url" id="url_input" />
  </div>

  <div class="field">
    <label for="email_input">Veuillez saisir une adresse électronique :</label>
    <input type="email" id="email_input" required />
  </div>
</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.

Notes

Boutons radio

Si un quelconque bouton radio dans un groupe (c'est-à-dire, avec la même valeur pour leur attribut name) possède l'attribut required , la pseudo-classe :invalid est appliquée à tous les boutons si aucun d'entre eux n'est sélectionné.

Gestion dans Gecko

Par défaut, Gecko n'applique pas de style particulier à la pseudo-classe :invalid . Toutefois un style différent est appliqué (un halo rouge utilisant la propriété box-shadow) via la pseudo-classe :-moz-ui-invalid, qui s'applique dans un sous-ensemble des cas de :invalid.

Ce halo peut être désactivé avec les règles suivantes :

css
:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow: none;
}

Spécifications

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

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi