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 "Référence" doit comporter entre 5 et 10 caractères : attributs minlength et maxlength.
  De plus cette zone dit obligatoirement être renseignée (attribut required).
• 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

Historique de la pseudo-classe :valid.

• Sélecteurs - Niveau 4

  

  29 Septembre 2011

  Document de travail.

  

  

  

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.