Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter
Discussion :
Utiliser la pseudoclasse :invalid pour valider vos formulaires
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.
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.Envoyé par Bovino
Et c'est le problème des traductionsN'é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
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.
Bonjour,
je suis d'accord, ça manque d'explication.
On lit chapitre III :
Que signifie ici "valide" ?En effet, si votre élément HTML est valide, la classe :valid s'applique alors.
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.
Oui, notamment avec L'attribut pattern.Peut-on définir sur quel critère baser la "validité" ?
Potentiellement non, tu dois par exemple pouvoir les utiliser en JavaScript avec la méthode querySelectorAll().Les pseudo-class :valid et :invalid ne servent-elles qu'à modifier le style CSS des champs ?
Bovino, tu es une véritable encyclopédie !
Ca devrait me permettre de réduire la taille de mes fichiers de validation JavaScript.
Mais... pour les navigateurs plus anciens ?
Autre petite question :
required ou required="required" : c'est kif-kif, non ?
A priori, on peut considérer qu'à part IE, l'ensemble des navigateurs se mettent à jour automatiquement, il faut donc juste prévoir des fallbacks pour IE que tu peux ne charger qu'en cas de besoin.Mais... pour les navigateurs plus anciens ?
Oui, le premier correspond à la syntaxe HTML, le second à la syntaxe xhtml. Or HTML5 accepte les deux syntaxes, même panachées, donc ensuite, c'est une question de choix personnel. Pour ma part, je me force à utiliser la syntaxe xhtml plus cohérente (car XML compliant) et plus propre de mon point de vue.required ou required="required" : c'est kif-kif, non ?
Je rajouterais un lien vers le MDN : https://developer.mozilla.org/en-US/...int_validation
Au lieu d'implémenter vous même vos infobulles pour énoncer les problèmes, la fonction setCustomValidation() fait faire ça par le navigateur.
Par contre, j'aurais plutôt espéré d'envoyer une fonction à la dernière pour envoyer un callback à appeler pour la validation.
Bonjour,
Tout d'abord merci pour cette traduction, et la présentation de cette nouvelle propriété.
Je trouve cependant que le titre de l'article est un peu trompeur. On ne valide pas un formulaire par du CSS. La validation coté serveur reste "obligatoire" si on ne veut pas s'exposer à des failles importantes... Un titre "[CSS 3] Utilisez la pseudoclasse :invalid pour personnaliser vos formulaires" me paraîtrait plus juste.
Romain.
L'auteur ne prétend absolument pas remplacer une validation côté serveur (PHP par exemple).
Cependant, à la différence d'une validation client en JavaScript, la validation des champs par le biais de l'attribut required et de la classe :invalid ne peut pas être désactivée, et fonctionnera donc sur n'importe quel poste client (pour peu qu'il ait un navigateur récent bien entendu).
Le HTML pouvant être édité à la volée (avec Firebug sur Firefox par exemple), il sera tout à fait possible à une personne de supprimer l'attribut required et donc de désactiver le caractère obligatoire d'un champ. D'autre part le CSS peut-être désactivé au même titre que le JavaScript sur un navigateur.
Je pense que l'auteur devrait donc préciser dans l'article que cette méthode ne peut pas remplacer la validation coté serveur (mais qu'elle peut par contre la compléter). Car un développeur néophyte pourrait très bien penser à la lecture de cet article que cette méthode est suffisante.
PS : Je comprends bien que l'article est une traduction et que le traducteur n'a probablement pas voulu ajouter une phrase qui n'était pas dans l'article original.
En effet, le but de la traduction est de rester fidèle
Mais c'est pour ça que la discussion forum existe, et quelqu'un qui n'est pas complètement dénué de neurones lira les commentaires associés à l'article avant de se lancer dans quoi que ce soit, et verra ta remarque
Merci à toi
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Répondre avec citation
Partager