MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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.

/* Selects any input element, but only if its current value is invalid */
input:invalid {
  background-color: #ffdddd;
}

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 courriel :</label>
  <input type="email" id="email-input" required>
</form>

Résultat

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é Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
<input>) 10.0 4.0 (2) 20 (12.10240) 10 10.0 5.0
<form> ? 13 (13) Pas de support ? ? ?
Fonctionnalité Android Firefox Mobile (Gecko) Edge IE Mobile Opera Mobile Safari Mobile
(<input>) ? 4.0 (2) (Oui) Pas de support 10.0 5.0
<form> ? 13 (13) Pas de support ? ? ?

Voir aussi

Étiquettes et contributeurs liés au document

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