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.

Ces deux pseudo-classes peuvent également être appliquées aux formulaires. Dans ce cas, le sélecteur :valid ne s'active que si TOUTTES les zones de saisie du formulaire sont valides, et le sélecteur :invalid que si au moins une des zones de saisie est invalide.

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.

Exemple sur des zones de saisie.

Les sélecteurs :valid et :invalid sont appliqués aussi bien sur le formulaire lui-même que sur les différentes zones de saisie. Lorsque tous les éléments du formulaire sont valides, celui-ci est également valide. Si une seule zone est invalide, le formulaire est invalide.

Les éléments dont la valeur est valide sont entourés d'un contour vert, ceux dont la valeur est invalide sont entourés 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.

Exemple avec des groupes de zones de saisie fieldset.

La balise fieldset permet de grouper des zones de saisie. Visuellement cela se traduit par un rectangle qui entoure ces zones, éventuellement accompagné d'un titre. Appliquées à un fieldset les pseudo-classes :valid et :invalid fonctionnent comme sur un formulaire : le fieldset est valide si toutes les zones qu'il contient sont valides.

Dans l'exemple ci-dessous, le nom et le mot de passe sont tous les deux obligatoires, et parmi les bouton radio il faut en cocher un.

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

Estimation de la prise en charge globale.

97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Safari

Opéra

Chrome

Edge

KaiOS Browser

Firefox

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Opéra mini

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

Caniuse

Historique des pseudo-classes :valid et :invalid.

• Sélecteurs - Niveau 4

  Ce module de spécification définit de nouveaux sélecteurs utilisables en CSS.

  Concernant :valid, Introduction des pseudo-classes :valid et :invalid.
  

  29 Septembre 2011

  Document de travail.

  

  

  

Voir aussi...

Les pseudo-classes 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.