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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 10Edge Support complet 12Firefox Support complet 4IE Support complet 10Opera Support complet 10Safari Support complet 5WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 10Safari iOS Support complet 5Samsung Internet Android ?
Applies to <form> elementsChrome Support complet OuiEdge Aucun support NonFirefox Support complet 13IE Aucun support NonOpera Support complet OuiSafari ? WebView Android ? Chrome Android ? Edge Mobile Aucun support NonFirefox Android Support complet 14Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

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