Les pseudo-classes :valid et :invalid.

Description des pseudo-classes :valid et :invalid.

Les pseudo-classes :valid et :invalid ciblent les éléments dont la valeur est respectivement valide et invalide. On s'adresse donc ici à des éléments tels que les zones de saisie input. Une valeur est considérée comme valide si elle répond aux conditions suivantes :

• Elle est conforme au type de donnée défini dans le code HTML (attribut type de la balise input).
• Elle correspond au format de saisie défini par l'attribut pattern.
• Elle se situe dans la fourchette des valeurs autorisées définie par les attributs min et max.
• Elle est conforme à l'attribut step qui, avec min et max, définit les valeurs autorisées.
  Par exemple min="1" max="5" step="2" autorise uniquement les valeurs 1, 3 et 5.
• Le nombre de caractères saisis est dans la fourchette définie par les attributs minlength et maxlength.

D'autres pseudo-classes permettent de cibler des zones de saisie en fonction de critères plus précis :

• :in-range et :out-of-range ciblent les éléments dont la valeur si situe dans la fourchette des valeurs autorisées ou à l'extérieur de cette fourchette.
• :required et :optional ciblent respectivement les zones de saisie obligatoires et celles qui sont optionnelles.

Exemples d'utilisation de :valid et :invalid.

Les zones de saisie dont la valeur est valide sont entourée d'un contour vert, celles dont la valeur est invalide sont entourée d'un contour rouge.

• La zone "Code postal" est du type text avec un pattern qui nécessite la saisie de 5 chiffres.
• La zone "Ville" doit obligatoirement être renseignée : l'attribut required est présent.
• La zone "Référence" doit comporter entre 5 et 10 caractères : attributs minlength et maxlength.
• La zone "Nombre" attend la saisie d'une valeur numérique (type="number"). La plupart des caractères non numériques sont bloqués, mais il est cependant possible de saisir des valeurs erronées telles que 5-5, 5+5, e3, etc.
  Puisque les valeurs minimale et maximale ont été définies à 10 et 20 avec un pas de 2, il est possible aussi d'activer la pseudo-classe :invalid en tapant une valeur en dehors de cette fourchette ou un nombre impair.
• Les deux dernières zones vérifient que la forme de la saisie soit conforme à celle d'une adresse mail et d'une url.

Compatibilité des navigateurs.

Les pseudo-classes :valid et :invalid ne posent aucun problème de compatibilité avec les navigateurs actuels.

1

:valid
:invalid

2

:valid :invalid sur form

Estimation de la prise en charge en pourcentage du parc actuel.

97%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Version testée : 105 (2022)

Chrome

Version testée : 105 (2022)

Chrome pour Androïd

Version testée : 105 (2022)

Edge

Version testée : 105 (2022)

Firefox

Version testée : 104 (2022)

Firefox pour Androïd

Version testée : 104 (2022)

Internet Explorer

Version testée : 11 (2013)

Opéra

Version testée : 91 (2022)

Opéra Mobile

Version testée : 64 (2021)

Safari

Version testée : 16.0 (2022)

Safari sur IOS

Version testée : 16.0 (2022)

Samsung Internet

Version testée : 18.0 (2022)

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Voir aussi...

Les pseudo-classes sont relatives aux zones de saisie et à leur état à un moment donné (en lecture seule, valides, requises, etc.) sont listées ci-après. Reportez-vous à leur description pour en savoir plus.

• :autofill : Pseudo-classe désignant les éléments de saisie dont le contenu a été renseigné automatiquement par le navigateur.
• :blank : Pseudo classe désignant les zones de saisie vides.
• :checked : Pseudo-classe désignant les cases à cocher (ou boutons radio) qui sont cochés, ainsi que les éléments de menu sélectionnés.
• :default : Pseudo-classe désignant les cases à cocher et boutons radio qui sont cochés par défaut.
• :disabled : Pseudo-classe désignant les zones de saisie veerrouillées.
• :enabled : Pseudo-classe désignant les zones de saisies non verrouillées.
• :indeterminate : Pseudo classe désignant les zones de saisie dont la valeur est indéterminée.
• :in-range : Pseudo-classe désignant les zones de saisie dont la valeur est dans la fourchette autorisée.
• :invalid : Pseudo classe désignant les zones de saisie contenant une information invalide.
• :optional : Pseudo élément désignant les zones de saisie non obligatoires.
• :out-of-range : Pseudo-classe désignant les zones de saisie dont la valeur est en dehors de la plage autorisée.
• :placeholder-shown : Pseudo-classe désignant les zones de saisie comportant un texte d'aide.
• :read-only : Pseudo-classe désignant les zones de saisie en lecture seule.
• :read-write : Pseudo-classe désignant les zones de saisie en lecture écriture.
• :required : Pseudo-classe désignant les zones de saisie obligatoires.
• :user-invalid : Pseudo-classe désignant les zones de saisie dont la valeur est invalide.
• :user-valid : Pseudo-classe désignant les zones de saisie dont la valeur est valide.
• :valid : Pseudo-classe désignant les zones de saisie contenant une information valide.