:invalid
Correspond aux champs de formulaire dont la valeur enfreint les règles de validation HTML, par exemple un champ requis vide ou une adresse e-mail incorrecte.
Exemple
#.error {
display: none;
color: #fda4af;
}
.field input:user-invalid {
border-color: #f43f5e;
}
.field input:user-invalid + .error {
display: block;
}<style>
.field { display: grid; gap: 6px; }
.field input { padding: 9px 12px; border: 2px solid #3f3f46; border-radius: 10px; background: #18181b; color: inherit; font: inherit; }
.field small { font-size: 13px; }
</style>
<div class="field">
<label for="email">Adresse e-mail</label>
<input id="email" type="email" required placeholder="lea@exemple.fr">
<small class="error">Indiquez une adresse e-mail valide.</small>
</div>Saisissez un texte sans le signe @ et cliquez à côté du champ. Le message n’apparaît qu’après cette interaction, et non dès le chargement de la page.
Définition et utilisation
#La pseudo-classe :invalid relie le CSS à la validation intégrée des formulaires. Un champ y correspond quand sa valeur enfreint l’une des règles écrites en HTML : required sur un champ vide, type="email" sur un texte qui n’est pas une adresse, ainsi que pattern, min ou max. Son contraire est :valid.
L’état change en continu, à chaque caractère saisi. <form> et <fieldset> correspondent aussi à :invalid s’ils contiennent au moins un champ incorrect, ce qui permet par exemple d’atténuer le bouton d’envoi.
Le piège le plus important : un champ vide avec required est incorrect dès le chargement de la page. Des bordures rouges avant même que l’utilisateur ait écrit quoi que ce soit ressemblent à une réprimande. La solution est :user-invalid, qui ne s’active qu’après une interaction : après une modification de la valeur et la sortie du champ, ou après une tentative d’envoi du formulaire. Elle fonctionne dans tous les grands navigateurs depuis 2023. L’ancienne méthode est :not(:placeholder-shown):invalid.
Syntaxe
#sélecteur:invalid { propriété: valeur; }Utilisations courantes
#- Tous les champs incorrects d’un coup. Le champ requis vide est rouge, bien que personne n’y ait encore touché.
- Le contraire : les champs avec une valeur correcte. Corrigez le second champ en une adresse complète pour voir le changement.
- La bordure rouge n’apparaît qu’après une interaction. Rendez la valeur d’un champ incorrecte et cliquez à côté.
input:not(:placeholder-shown):invalid
Ancienne méthode : l’erreur n’apparaît que dans les champs non vides. Le champ requis vide reste neutre.- Le formulaire correspond aussi à
:invaliddès qu’il contient au moins un champ incorrect.
Utilisations courantes en pratique
#input:invalid
input:invalid { border-color: #f43f5e; }input:valid
input:valid { border-color: #10b981; }input:user-invalid
input:user-invalid { border-color: #f43f5e; }input:not(:placeholder-shown):invalid
input:not(:placeholder-shown):invalid { border-color: #f43f5e; }form:invalid
:invalid dès qu’il contient au moins un champ incorrect.form:invalid {
outline: 2px dashed #f43f5e;
outline-offset: 4px;
}Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- N’affichez pas d’erreurs avant que l’utilisateur commence à agir. Mettez en valeur les champs incorrects via
:user-invalid, et réservez:invalidpar exemple à l’atténuation du bouton d’envoi. - La couleur seule ne suffit pas, car tout le monde ne la distingue pas. Ajoutez un message texte ou une icône à côté du champ.
- La validation en HTML et en CSS est un confort pour l’utilisateur, pas une protection. Les données doivent de toute façon être vérifiées côté serveur.
Entrées associées
#- :placeholder-shownCorrespond à un champ input ou textarea qui affiche actuellement un texte de substitution, c’est-à-dire qu’il est vide et possède l’attribut placeholder.
- :has()Sélectionne un élément en fonction de ce qu’il contient ou de ce qui se trouve après lui. Permet de styliser un parent selon ses enfants.
- :focusCorrespond à l’élément qui a le focus, c’est-à-dire qui reçoit actuellement la saisie au clavier, par exemple un champ de formulaire cliqué.
- :disabledCorrespond aux éléments désactivés d’un formulaire, c’est-à-dire ceux qu’on ne peut ni cliquer, ni cocher, ni modifier.
- :not()Sélectionne les éléments qui ne correspondent à aucun des sélecteurs fournis, ni à aucun de la liste.
- :focus-withinCorrespond à un élément qui a lui-même le focus ou qui contient un élément avec le focus. Permet de mettre en valeur tout un formulaire ou une carte.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.