:invalid

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

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

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

: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 AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
:invalidChrome Support complet 10Edge Support complet 12Firefox Support complet 4IE Support complet 10Opera Support complet 10Safari Support complet 5WebView Android Support complet 37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 5Samsung Internet Android Support complet 1.0
Applies to <form> elementsChrome Support complet 40Edge Aucun support NonFirefox Support complet 13IE Aucun support NonOpera Support complet 27Safari Support complet 9WebView Android Support complet 40Chrome Android Support complet 40Firefox Android Support complet 14Opera Android Support complet 27Safari iOS Support complet 9Samsung Internet Android Support complet 4.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support

Voir aussi