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 :

• et ciblent les éléments dont la valeur si situe dans la fourchette des valeurs autorisées ou à l'extérieur de cette fourchette.
• et 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

Pseudo-classes
:valid
:invalid

2

Pseudo-classes
:valid
:invalid
sur form

Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Opéra

Safari

Safari sur IOS

Opéra mini

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.
⚠
:closed
Pseudo-classe ciblant un élément pouvant être soit ouvert, soit fermé (comme un menu select), et qui se trouve dans l'état fermé.
: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.
:in-range
Pseudo-classe désignant les zones de saisie dont la valeur est dans la fourchette autorisée.
:indeterminate
Pseudo classe désignant les zones de saisie dont la valeur est indéterminée.
:invalid
Pseudo classe désignant les zones de saisie contenant une information invalide.
⚠
:open
Pseudo-classe ciblant les éléments pouvant être soit ouverts, soit fermés (comme select), et qui se trouvent dans l'état ouvert.
: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.