Discussion :

[FirePrawn]

Je vous propose une traduction de l'article anglophone Using The :invalid CSS Pseudo Class par Paul Underwood : Utiliser la pseudoclasse :invalid pour valider vos formulaires.

N'hésitez pas à faire part de vos remarques, commentaires ou propositions d'améliorations !

Utiliser la pseudoclasse :invalid pour valider vos formulaires.

[Bovino]

C'est intéressant de faire découvrir les nouveaux sélecteurs disponibles, en revanche, l'explication sur le fonctionnement me semble un peu succincte...

En effet, dans l'exemple, il est indiqué que le champ email est en rouge parce que l'attribut required est présent et que le champ est vide, ce qui est certes vrai, mais il serait bon de rajouter que si l'on tape "toto" par exemple dans le champ, il sera toujours rouge (donc :invalid) parce que "toto" ne correspond pas à une adresse mail valide et donc pas au type du champ.

[FirePrawn]

C'est intéressant de faire découvrir les nouveaux sélecteurs disponibles, en revanche, l'explication sur le fonctionnement me semble un peu succincte...

En effet, dans l'exemple, il est indiqué que le champ email est en rouge parce que l'attribut required est présent et que le champ est vide, ce qui est certes vrai, mais il serait bon de rajouter que si l'on tape "toto" par exemple dans le champ, il sera toujours rouge (donc :invalid) parce que "toto" ne correspond pas à une adresse mail valide et donc pas au type du champ.

C'est pas faux.
Et c'est le problème des traductions N'étant que traducteur, je ne fais que retranscrire l'article original. Et malgré l'explication très succincte, l'article m'a tout de même semblé intéressant, d'où sa traduction.

Maintenant je pense que je peux sans doute rajouter quelques lignes d'explication sans que l'auteur me traine en justice

[Bovino]

Attention, je ne cherchais pas à dire que la traduction est mauvaise ou quelle n'a pas sa place ici, au contraire !
Faire découvrir des nouveautés peu connues est important

Le but de la discussion est aussi d'apporter d'éventuelles informations complémentaires.

[Invité]

Bonjour,
je suis d'accord, ça manque d'explication.
On lit chapitre III :

En effet, si votre élément HTML est valide, la classe :valid s'applique alors.

Que signifie ici "valide" ?
Selon quels critères ?

-> OK pour validité d'email si on a type="email".
-> mais pour un numéro de téléphone, par exemple ? Peut-on définir sur quel critère baser la "validité" ?
-> et pour un input type="file" : validité du fichier ? (image, pdf,... ?)

Les pseudo-class :valid et :invalid ne servent-elles qu'à modifier le style CSS des champs ?

PS : quoi qu'il en soit, merci à FirePrawn, Bovino, Torgar,... et tous ceux qui nous font régulièrement découvrir de nouvelles propriétés via leur articles.

[Bovino]

Peut-on définir sur quel critère baser la "validité" ?

Oui, notamment avec L'attribut pattern.

Les pseudo-class :valid et :invalid ne servent-elles qu'à modifier le style CSS des champs ?

Potentiellement non, tu dois par exemple pouvoir les utiliser en JavaScript avec la méthode querySelectorAll().