Les pseudo-classes :user-valid et :user-invalid.

Description des pseudo-classes :user-valid et :user-invalid.

Les pseudo-classes :user-valid et :user-invalid ciblent les zones de saisie dont la valeur est respectivement valide ou invalide, mais seulement après que l'utilisateur ait interagi avec ces éléments : saisie ou effacement d'un caractère.

La valeur est considérée comme invalide dans les cas suivants :

• La valeur n'est pas conforme au type de donnée défini par l'attribut type.
• Valeur absente alors qu'elle est obligatoire : attribut required dans le code HTML.
• Valeur en dehors de la fourchette d'acceptation : attributs min et max dans le code HTML.
• La valeur ne correspond pas au format de saisie imposé par l'attribut pattern.
• Le nombre de caractères saisis ne correspond pas aux contraintes imposées par les attributs minlength et maxlength.

La différence avec les pseudo-classes :valid et :invalid est subtile : celles-ci s'active dès le chargement de la page, alors que :user-valid et :user-invalid s'activent seulement après une première action de l'utilisateur sur la zone de saisie.

Exemples d'utilisation de :user-valid et :user-invalid.

L'intérêt de l'exemple ci-dessous est surtout de montrer la différence de comportement entre :valid et :user-valid. Pour chacune des zones de saisie, la couleur de l'arrière-plan est gérée par :valid (vert) et :invalid (rouge), tandis que le contour est géré par :user-valid et :user-invalid.
En conséquence, la couleur d'arrière-plan est mise en place dès l'affichage de la page, tandis que le contour n'apparaîtra que après la frappe d'un caractère dans chacune des zones de saisie.

Prise en charge de :user-valid et :user-invalid.

1

Pseudo-classe
:user-valid

2

Pseudo-classe
:user-invalid

Estimation de la prise en charge globale.

86%

86%

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

Firefox

Safari

Safari sur IOS

Chrome

Opéra

Edge

Chrome pour Androïd

Firefox pour Androïd

Androïd Brower

KaiOS Browser

Opéra mini

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

Caniuse

Caniuse

Autres pseudo-classes en rapport.

Les pseudo-classes listées ci-dessous sont relatives aux zones de saisie ou à leur état à un moment donné (valides, cochées, activées, verrouillées, etc.).
Vous pouvez également vous reporter à la spécification CSS du W3C concernant les sélecteurs.

: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.
:valid
Pseudo-classe désignant les zones de saisie contenant une information valide.