Un récapitulatif des pseudo-classes

Une pseudo-classe est une information sur un élément qui est dans l’arbre de document, mais qui n’est pas disponible par l’intermédiaire d’attributs spécifiés. Par exemple, la ps eudo-classe : premier enfant s’applique aux éléments qui sont le premier enfant de leurs parents. Vous pouvez obtenir cette information de l’arbre DOM, mais il n’y a pas d’ attribut de p remier enfant.

Dans CSS2.1, il y avait une poignée de pseudo-classes disponibles, notamment les états de lien (: link, :v isité) et ceux des actions des utilisateur s (:acti v e,:hove r). Dans CSS3, cette poignée devient un panier, avec des pseudo-classes de structure (:nth-child, :nth-of-type ), élément d’inte rface utilisateur (:activé, :vé rifié), e t ceux que nous allons examiner maintenant, de validation de forme.

Validation de formulaire sans JavaScript

Donc, comme je l’ai mentionné au début, HTML5 introduit la validation du formulaire côté client sans avoir besoin de JavaScript. Lorsque vous essayez de soumettre un formulaire, votre navigateur valide tous les champs et retourne une erreur si l’un des champs est incorrect. Cela se produira principalement automagically – à condition que votre navigateur a la capacité – et ressemblera à quelque chose comme ce qui est montré dans la figure 1:

Ces messages d’erreur sont spécifiques au navigateur et au système d’exploitation, et difficiles à modifier (que j’ai documentés sur mon blog), mais vous pouvez modifier la façon dont les erreurs apparaissent sur les éléments eux-mêmes avec les nouvelles pseudo-classes de validation, qui font partie du module d’interface utilisateur de base CSS3.

Je vais couvrir le support actuel du navigateur que nous passons par l’article, mais en un mot:

• Firefox et IE10 soutiennent une partie de celui-ci.
• Opera et Chrome soutiennent tout cela.
• Safari prend en charge tout cela aussi, mais la validation du formulaire est désactivée par défaut.

Cela étant, je vous recommande d’utiliser Chrome, Opera ou Safari pour voir les exemples que je vais vous montrer.

Si vous voulez rester à jour avec la prise en charge du navigateur pour la validation de formulaire, je suggère de garder un œil sur quand puis-je utiliser.

Donc, avec tous les guff technique ennuyeux de la route, nous allons passer à l’intéressant guff technique et jeter un oeil à quelques exemples de validation de formulaire.

Éléments requis et facultatifs

L’un des modèles de validation les plus courants est celui des valeurs obligatoires (c’est-à-dire requises) — les champs que l’utilisateur doit compléter pour progresser. Pour marquer un élément de formulaire comme obligatoire, vous n’avez qu’à lui ajout er l’attribut requis :

<input type="text" required>

Si vous souhaitez appliquer des styles à cela afin de montrer cette exigence, vous pouvez utiliser la n ouvelle ps eudo-classe : requise, qui applique des règles à n’importe quel élément apparié qu i a l’att ribut requis. Par exemple, vous pouvez mettre un astérisque après le texte de l’étiquette :

entrée: requis + étiquette::après { contenu: « * »; }

Les règles exactes que vous utilisez dépendent de la façon dont vous avez marqué votre document. La règle dans cet exemple est basée sur le balisage ayant cette structure:

<input type="text" required id="foo">
<label for="foo">Foo</label>

Le contraire de l’requis est, bien sûr, facultatif. Et ne le savez-vous pas, nous avons une pseudo-classe pour cela aussi, logiquement nommé: facultati f. Il affecte tout élément de forme qui n’a pas d’a ttributi on requise. Par exemple, vous pouvez faire en sorte que ceux-ci aient une bordure plus légère :

entrée: facultatif { couleur bordure: argent; }

Vous pouvez le voir en action dans la figure 2, ou jeter un oeil à un exemple en direct.

Éléments valides et invalides

Il existe d’autres types de validation en plus simplement « requis » ou « facultatif ». Vous pouvez utiliser l’appariement des motifs, comme la validation de l’adresse e-mail :

<input type="email">

Si l’utilisateur entre quelque chose dans le champ, il doit correspondre au modèle d’une adresse e-mail, sinon il sera marqué comme invalide. (Bien sûr, si ce n’est pas nécessaire, alors il peut être laissé vide.)

Vous pouvez coiffer des éléments de formulaire valides ou invalides à l’aide de pseudo-classes appelées — attendez-les — : valid es et : invalide s. Peut-être souhaitez-vous ajouter un symbole en fonction de l’état de validation :

entrée: invalide + étiquette::après { contenu: ' ⨉'; } entrée:valid + label::after { contenu: ' ◊'; }

Notez que ceux-ci entreront en vigueur dès que la page se charge, de sorte que vous aurez probablement envie d’utiliser JavaScript pour les appliquer seulement après la soumission, peut-être en ajoutant une classe au formulaire avec JavaScript:

document.forms[0].addEventListener('submit', function(e) { e.currentTarget.classList.add('submitted');   Votre fonction de validation de formulaire de repli });

Le script exact que vous utilisez variera, mais quelle que soit la mesure où vous le faites, vous pouvez utiliser cette classe pour coiffer les éléments de forme, comme si:

.submitted input:invalid + label::after { contenu: '⨉'; }

Figure 3 montre la sortie de ce, et vous pouvez également voir l’exemple en direct.

Deux choses supplémentaires à noter sur cet exemple: tout d’abord, afin d’utiliser mon propre JavaScript, j’ai empêché le formulaire de valider automatiquement en utilisan t l’attribu t novalidate sur le bouton soumettre; et deuxièmement, Firefox met une lueur colorée autour des éléments en fonction de leur état de validation, que j’ai sur-gouverné en utilisant leur propriétaire :-moz-ui-sélecte ur invalide. Consultez la source de la démo pour voir comment elles sont utilisées.

Plages de nombres

Certains des nouveaux types d’entrée, tels que le nomb re, permettent une gamme de valeurs en utilisa nt l es att ribu ts min et max, comme ainsi:

<input type="number" max="10" min="1">

Bien que les contrôles de formulaire empêchent généralement l’utilisateur d’entrer une valeur en dehors de cette plage, il peut y avoir des occasions (par exemple lorsque JavaScript est utilisé pour fournir des valeurs) où la valeur fournie à l’entrée dépasse la plage :

<input type="number" max="10" min="1" value="11">

Lorsque cela se produit, vous pouvez utili ser la pseudo-cl asse hors de portée pour votre style :

entrée[type='number']: hors de portée { couleur bordure: rouge; }

Et, comme on peut s’y attendre, il ya une contrepartie connue sous le nom de:in-rang e:

entrée[type='number']: dans la gamme { couleur bordure: vert; }

Dans la figure 4, vous pouvez voir ces deux pseudo-classes à l’œuvre, et une fois de plus il ya aussi un exemple en direct à voir.

Lecture et écriture

Vous pouvez avoir un champ de formulaire qui est pré-rempli d’une valeur que vous ne voulez pas que l’utilisateur soit en mesure de modifier, tels que les termes et conditions dan s atextare a. Si c’est le cas, vous pouvez ajouter l’attribu t readonly :

<textarea readonly="">Ipsum Lorem</textarea>

Vous pouvez style éléments qui ont l’attribut readonly appliqué, en utilisant … pouvez-vous deviner? Vous avez raison, lecteur imaginé: le :read-only pseudo-classe. Vous pouvez le combiner avec la prop riété CSS séle ctionnée par l’utilisateur pour empêcher l’utilisateur d’être en mesure de sélectionner le texte (dans l’exemple, j’ai également changé le style de bordure pour le rendre plus évident):

textarea:read-only { user-select: none; }

Et si vous en avez besoin, il y a bien sûr une ps eudo-classe : lire-écrire pour les éléments qui n’ont pas l’attribut appliqué :

textarea:read-write { user-select: texte; }

Vous pouvez voir les résultats dans la figure 5, et comme avant il ya un exemple en direct aussi.

Firefox et IE10 ont effectivement implémenté l’a ttribut readonly, mais n’ont pas encore de soutien pour ces pseudo-classes.