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.

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

Syntaxe

:invalid

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

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;
}

HTML

<form>
  <label for="url-input">Tapez une URL :</label>
  <input type="url" id="url-input">
  <br>
  <br>
  <label for="email-input">Tapez une adresse électronique :</label>
  <input type="email" id="email-input" 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.

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 :

:invalid {
  box-shadow: none;
}

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

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

Spécifications

Spécification État Commentaire
HTML Living Standard
La définition de ':invalid' dans cette spécification.
Standard évolutif Aucune modification.
HTML5
La définition de ':invalid' dans cette spécification.
Recommendation Définition de la sémantique relative à HTML et aux contraintes de validation.
Selectors Level 4
La définition de ':invalid' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1012410105
Applies to <form> elements Oui Non13 Non Oui ?
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple ? ? Oui4105 ?
Applies to <form> elements ? ? Non14 ? ? ?

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, tregagnon, teoli, FredB
Dernière mise à jour par : SphinxKnight,