IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

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

Publications (X)HTML et CSS Discussion :

Utiliser la pseudoclasse :invalid pour valider vos formulaires


Sujet :

Publications (X)HTML et CSS

  1. #1
    Expert éminent sénior

    Avatar de FirePrawn
    Homme Profil pro
    Consultant technique
    Inscrit en
    Mars 2011
    Messages
    3 179
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Consultant technique

    Informations forums :
    Inscription : Mars 2011
    Messages : 3 179
    Points : 19 374
    Points
    19 374
    Par défaut 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.

    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 419
    Points
    91 419
    Billets dans le blog
    20
    Par défaut
    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.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Expert éminent sénior

    Avatar de FirePrawn
    Homme Profil pro
    Consultant technique
    Inscrit en
    Mars 2011
    Messages
    3 179
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Consultant technique

    Informations forums :
    Inscription : Mars 2011
    Messages : 3 179
    Points : 19 374
    Points
    19 374
    Par défaut
    Citation Envoyé par Bovino Voir le message
    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
    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 419
    Points
    91 419
    Billets dans le blog
    20
    Par défaut
    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.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Invité
    Invité(e)
    Par défaut
    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.

  6. #6
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 419
    Points
    91 419
    Billets dans le blog
    20
    Par défaut
    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().
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  7. #7
    Invité
    Invité(e)
    Par défaut
    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 ? (c'est l'eternel problème des développeur concernant la compatibilité...)

    Autre petite question :
    required ou required="required" : c'est kif-kif, non ?

  8. #8
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 419
    Points
    91 419
    Billets dans le blog
    20
    Par défaut
    Mais... pour les navigateurs plus anciens ?
    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.

    required ou required="required" : c'est kif-kif, non ?
    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.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  9. #9
    Membre averti
    Inscrit en
    Mars 2008
    Messages
    283
    Détails du profil
    Informations forums :
    Inscription : Mars 2008
    Messages : 283
    Points : 380
    Points
    380
    Par défaut
    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.

  10. #10
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2008
    Messages
    394
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2008
    Messages : 394
    Points : 639
    Points
    639
    Par défaut
    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.

  11. #11
    Expert éminent sénior

    Avatar de FirePrawn
    Homme Profil pro
    Consultant technique
    Inscrit en
    Mars 2011
    Messages
    3 179
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Consultant technique

    Informations forums :
    Inscription : Mars 2011
    Messages : 3 179
    Points : 19 374
    Points
    19 374
    Par défaut
    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 ).
    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

  12. #12
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2008
    Messages
    394
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2008
    Messages : 394
    Points : 639
    Points
    639
    Par défaut
    Citation Envoyé par FirePrawn Voir le message
    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
    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.

  13. #13
    Expert éminent sénior

    Avatar de FirePrawn
    Homme Profil pro
    Consultant technique
    Inscrit en
    Mars 2011
    Messages
    3 179
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Consultant technique

    Informations forums :
    Inscription : Mars 2011
    Messages : 3 179
    Points : 19 374
    Points
    19 374
    Par défaut
    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
    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

Discussions similaires

  1. Réponses: 2
    Dernier message: 08/11/2013, 15h33
  2. [CSS 3] Utiliser la pseudoclasse :invalid pour valider vos formulaires
    Par FirePrawn dans le forum Mise en page CSS
    Réponses: 12
    Dernier message: 03/10/2012, 16h02
  3. Réponses: 5
    Dernier message: 11/01/2007, 10h50
  4. Réponses: 1
    Dernier message: 11/10/2006, 15h24
  5. [WebForms]Comment utiliser la touche entrée pour valider un formulaire ?
    Par yonialhadeff dans le forum Général Dotnet
    Réponses: 3
    Dernier message: 10/05/2006, 13h29

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo