Publicité
+ Répondre à la discussion Actualité déjà publiée
Affichage des résultats 1 à 13 sur 13
  1. #1
    Responsable Développement Web

    Avatar de FirePrawn
    Homme Profil pro Sébastien Germez
    Ingénieur réalisateur
    Inscrit en
    mars 2011
    Messages
    3 158
    Détails du profil
    Informations personnelles :
    Nom : Homme Sébastien Germez
    Âge : 26
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur réalisateur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2011
    Messages : 3 158
    Points : 23 643
    Points
    23 643

    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.

    Vous souhaitez participer à la rubrique Développement Web, contactez-moi !
    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
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    22 196
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : juin 2008
    Messages : 22 196
    Points : 86 252
    Points
    86 252
    Billets dans le blog
    3

    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
    Responsable Développement Web

    Avatar de FirePrawn
    Homme Profil pro Sébastien Germez
    Ingénieur réalisateur
    Inscrit en
    mars 2011
    Messages
    3 158
    Détails du profil
    Informations personnelles :
    Nom : Homme Sébastien Germez
    Âge : 26
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur réalisateur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2011
    Messages : 3 158
    Points : 23 643
    Points
    23 643

    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
    Vous souhaitez participer à la rubrique Développement Web, contactez-moi !
    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
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    22 196
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : juin 2008
    Messages : 22 196
    Points : 86 252
    Points
    86 252
    Billets dans le blog
    3

    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
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro Jérôme Réaux
    Webdesigner
    Inscrit en
    août 2008
    Messages
    5 374
    Détails du profil
    Informations personnelles :
    Nom : Homme Jérôme Réaux
    Âge : 47
    Localisation : Nouvelle-Calédonie

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 5 374
    Points : 10 320
    Points
    10 320

    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.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Ce qui se conçoit bien s'énonce clairement. Et les mots pour le dire arrivent aisément."
    Nicolas Boileau-Despréaux (1636-1711).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  6. #6
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    22 196
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : juin 2008
    Messages : 22 196
    Points : 86 252
    Points
    86 252
    Billets dans le blog
    3

    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
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro Jérôme Réaux
    Webdesigner
    Inscrit en
    août 2008
    Messages
    5 374
    Détails du profil
    Informations personnelles :
    Nom : Homme Jérôme Réaux
    Âge : 47
    Localisation : Nouvelle-Calédonie

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 5 374
    Points : 10 320
    Points
    10 320

    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 ?
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Ce qui se conçoit bien s'énonce clairement. Et les mots pour le dire arrivent aisément."
    Nicolas Boileau-Despréaux (1636-1711).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  8. #8
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    22 196
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : juin 2008
    Messages : 22 196
    Points : 86 252
    Points
    86 252
    Billets dans le blog
    3

    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 éclairé
    Inscrit en
    mars 2008
    Messages
    283
    Détails du profil
    Informations forums :
    Inscription : mars 2008
    Messages : 283
    Points : 363
    Points
    363

    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 chevronné
    Inscrit en
    mai 2008
    Messages
    394
    Détails du profil
    Informations forums :
    Inscription : mai 2008
    Messages : 394
    Points : 622
    Points
    622

    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
    Responsable Développement Web

    Avatar de FirePrawn
    Homme Profil pro Sébastien Germez
    Ingénieur réalisateur
    Inscrit en
    mars 2011
    Messages
    3 158
    Détails du profil
    Informations personnelles :
    Nom : Homme Sébastien Germez
    Âge : 26
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur réalisateur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2011
    Messages : 3 158
    Points : 23 643
    Points
    23 643

    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 ).
    Vous souhaitez participer à la rubrique Développement Web, contactez-moi !
    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 chevronné
    Inscrit en
    mai 2008
    Messages
    394
    Détails du profil
    Informations forums :
    Inscription : mai 2008
    Messages : 394
    Points : 622
    Points
    622

    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
    Responsable Développement Web

    Avatar de FirePrawn
    Homme Profil pro Sébastien Germez
    Ingénieur réalisateur
    Inscrit en
    mars 2011
    Messages
    3 158
    Détails du profil
    Informations personnelles :
    Nom : Homme Sébastien Germez
    Âge : 26
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur réalisateur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2011
    Messages : 3 158
    Points : 23 643
    Points
    23 643

    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
    Vous souhaitez participer à la rubrique Développement Web, contactez-moi !
    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •