Intéressante vidéo ! 👍 Personnellement, j'ai utilisé les deux approches, sans préférence particulière. En revanche, usage systématique de l'event delegation (car il vaut mieux éviter d'ajouter un listener sur chaque champ d'un form surtout si le form en a beaucoup) et donc : evt.target systématique (logique). Et surtout, utilisation de "input.validity" (qui permet de gérer finement les choses : "patternMismatch", "tooLong", "tooShort", "rangeOverflow", ...) pour gérer les spécificités de chaque contrainte posée sur les champs. Et, pour faciliter les choses, un simple objet {"langue": {"type de validité" : "message", ...}, ...} pour la localisation des messages à afficher en fonction de la langue choisie par l'utilisateur (ou définie par défaut). Je ne pense donc pas qu'il faille éviter "required" (pas plus que les autres attributs de validation, comme "maxlength" ou "pattern"), mais juste qu'il faille bien connaître toutes les propriétés et méthodes mises à disposition par les API pour gérer ce type de problème une fois pour toute (au sein d'une application et même pour toutes les utilisations à venir, car les formulaires, on en a besoin souvent et un peu partout...)
Vidéo très intéressante, comme d'habitude. 🙂 Je pensais que tu allais parler de aria-required cependant qui, lui, est obligatoire pour l'accessibilité. La validation est importante également pour les technologies d'assistance. Un lecteur d'écran précise "saisie obligatoire" lorsque aria-required est à true. ^^
Sujet intéressant, cependant celui ci comporte plusieurs points problématique, si les messages sont en anglais c'est que la langue dans l'HTLM est en anglais. Ensuite pour la suppression de required, OK c'est possible, cependant pour que ce soit accessible ça demande énormément de temps de dev, car il va falloir recréer toute la vocalisation des messages d'erreur, s'inspirer des autres oui mais il faut être sur que ce soit bien fait. Dans les exemples seul Google est conforme. La natif n'est peut être pas le plus esthétique mais ça reste celui qui fonctionne le mieux. Tu as fait bcp de vidéo intéressante sur l'accessibilité et félicitation pour ça ce qui rends tout à fait dommage sur celle ci de ne pas en tenir compte
C'est une plaie "required", et de toute façon si on veut envoyer n'importe quoi, il suffit d'ouvrir la console, de lancer document.forms[0].submit() et paf ! ça part quoi qu'on ait fait derrière. Mais c'est une bonne façon de vérifier si côté serveur on a bien pris en compte la vérification des données ...
Pour avoir le message d'erreur d'un required en français il suffit de mettre la bonne langue dans la balise HTML (lang="fr"). Ça ne permet pas une personnalisation mais au moins c'est dans la bonne langue 😉
Intéressante vidéo ! 👍 Personnellement, j'ai utilisé les deux approches, sans préférence particulière. En revanche, usage systématique de l'event delegation (car il vaut mieux éviter d'ajouter un listener sur chaque champ d'un form surtout si le form en a beaucoup) et donc : evt target systématique (logique). Et surtout, utilisation de "input.validity" (qui permet de gérer finement les choses : "patternMismatch", "tooLong", "tooShort", "rangeOverflow", ...) pour gérer les spécificités de chaque contrainte posée sur les champs. Et, pour faciliter les choses, un simple objet pour la localisation des messages à afficher en fonction de la langue choisie par l'utilisateur (ou définie par défaut). Je ne pense donc pas qu'il faille éviter "required" (pas plus que les autres attributs de validation, comme "maxlength" ou "pattern"), mais juste qu'il faille bien connaître toutes les propriétés et méthodes mises à disposition par les API pour gérer ce type de problème une fois pour toute (au sein d'une application et même pour toutes les utilisations à venir, car les formulaires, on en a besoin souvent et un peu partout...)
Je suis absolument d’accord, il faut connaître la validation Front dans le détail avec tous les outils dispo et leur caractéristiques. La délégation est aussi très pratique et maintenable. Là je voulais faire un focus sur cet attribut en particulier.
Ton commentaire est intéressant aussi, mais je ne comprends pas tout malheureusement, peux-tu me dire s’il te plaît ce que tu entends par « l’event délégation » ? Merci 😊
@@LeValerTube L'event delegation consiste à écouter un évènement donné sur un élément parent plutôt que sur l'élément (ou les éléments) visés directement. On peut placer le listener plus ou moins "haut" par rapport à ce qui est visé, mais en général on reste sur un élément parent proche voire direct - ici, le form plutôt que chaque élément du formulaire : un seul listener pour le formulaire, au lieu d'un listener par élément du formulaire. Dans le contexte de la vidéo : l'évènement "invalid" ne "bubble" pas (il ne "remonte pas vers les éléments parents), on ne peut donc pas faire d'event delegation dessus. Mais on peut le faire pour d'autres events qui, eux, ont bien un "bubbling" (par exemple : les events "input", "focus", "click", etc.) Mais le plus simple (et là on n'est plus à proprement parler dans de l'event delegation) reste sans doute d'écouter l'event "submit" sur le form. Dans le callback, on peut dès lors facilement boucler sur les éléments du formulaire pour évaluer plus ou moins finement leur validité (input.validity / validityState) en suivant les API/méthodes natives du navigateur.
Intéressante vidéo ! 👍 Personnellement, j'ai utilisé les deux approches, sans préférence particulière. En revanche, usage systématique de l'event delegation (car il vaut mieux éviter d'ajouter un listener sur chaque champ d'un form surtout si le form en a beaucoup) et donc : evt . target systématique (logique). Et surtout, utilisation de "input.validity" (qui permet de gérer finement les choses : "patternMismatch", "tooLong", "tooShort", "rangeOverflow", ...) pour gérer les spécificités de chaque contrainte posée sur les champs. Et, pour faciliter les choses, un simple objet {"langue": {"type de validité" : "message", ...}, ...} pour la localisation des messages à afficher en fonction de la langue choisie par l'utilisateur (ou définie par défaut). Je ne pense donc pas qu'il faille éviter "required" (pas plus que les autres attributs de validation, comme "maxlength" ou "pattern"), mais juste qu'il faille bien connaître toutes les propriétés et méthodes mises à disposition par les API pour gérer ce type de problème une fois pour toute (au sein d'une application et même pour toutes les utilisations à venir, car les formulaires, on en a besoin souvent et un peu partout...)
Intéressante vidéo ! 👍
Personnellement, j'ai utilisé les deux approches, sans préférence particulière.
En revanche, usage systématique de l'event delegation (car il vaut mieux éviter d'ajouter un listener sur chaque champ d'un form surtout si le form en a beaucoup) et donc : evt.target systématique (logique).
Et surtout, utilisation de "input.validity" (qui permet de gérer finement les choses : "patternMismatch", "tooLong", "tooShort", "rangeOverflow", ...) pour gérer les spécificités de chaque contrainte posée sur les champs. Et, pour faciliter les choses, un simple objet {"langue": {"type de validité" : "message", ...}, ...} pour la localisation des messages à afficher en fonction de la langue choisie par l'utilisateur (ou définie par défaut).
Je ne pense donc pas qu'il faille éviter "required" (pas plus que les autres attributs de validation, comme "maxlength" ou "pattern"), mais juste qu'il faille bien connaître toutes les propriétés et méthodes mises à disposition par les API pour gérer ce type de problème une fois pour toute (au sein d'une application et même pour toutes les utilisations à venir, car les formulaires, on en a besoin souvent et un peu partout...)
Désolé, j'ai dû soumettre mon commentaire 3 fois : TH-cam n'aime manifestement pas du tout qu'on utilise des brackets dans les commentaires 😅
Très bon thème de vidéo
Vidéo très intéressante, comme d'habitude. 🙂 Je pensais que tu allais parler de aria-required cependant qui, lui, est obligatoire pour l'accessibilité. La validation est importante également pour les technologies d'assistance. Un lecteur d'écran précise "saisie obligatoire" lorsque aria-required est à true. ^^
Très bonne remarque !
Sujet intéressant, cependant celui ci comporte plusieurs points problématique, si les messages sont en anglais c'est que la langue dans l'HTLM est en anglais.
Ensuite pour la suppression de required, OK c'est possible, cependant pour que ce soit accessible ça demande énormément de temps de dev, car il va falloir recréer toute la vocalisation des messages d'erreur, s'inspirer des autres oui mais il faut être sur que ce soit bien fait. Dans les exemples seul Google est conforme.
La natif n'est peut être pas le plus esthétique mais ça reste celui qui fonctionne le mieux.
Tu as fait bcp de vidéo intéressante sur l'accessibilité et félicitation pour ça ce qui rends tout à fait dommage sur celle ci de ne pas en tenir compte
C'est une plaie "required", et de toute façon si on veut envoyer n'importe quoi, il suffit d'ouvrir la console, de lancer document.forms[0].submit() et paf ! ça part quoi qu'on ait fait derrière. Mais c'est une bonne façon de vérifier si côté serveur on a bien pris en compte la vérification des données ...
T’es trop fort mec, j’aurais été une startup je t’aurais payer 1000€ de tjm en tant que tech lead front
Ahaha 🙌💙
N’hésite pas à lancer ta startup alors !
Pour avoir le message d'erreur d'un required en français il suffit de mettre la bonne langue dans la balise HTML (lang="fr"). Ça ne permet pas une personnalisation mais au moins c'est dans la bonne langue 😉
Très juste, je l’ai oublié, merci de le rappeler!
Intéressante vidéo ! 👍
Personnellement, j'ai utilisé les deux approches, sans préférence particulière.
En revanche, usage systématique de l'event delegation (car il vaut mieux éviter d'ajouter un listener sur chaque champ d'un form surtout si le form en a beaucoup) et donc : evt target systématique (logique).
Et surtout, utilisation de "input.validity" (qui permet de gérer finement les choses : "patternMismatch", "tooLong", "tooShort", "rangeOverflow", ...) pour gérer les spécificités de chaque contrainte posée sur les champs. Et, pour faciliter les choses, un simple objet pour la localisation des messages à afficher en fonction de la langue choisie par l'utilisateur (ou définie par défaut).
Je ne pense donc pas qu'il faille éviter "required" (pas plus que les autres attributs de validation, comme "maxlength" ou "pattern"), mais juste qu'il faille bien connaître toutes les propriétés et méthodes mises à disposition par les API pour gérer ce type de problème une fois pour toute (au sein d'une application et même pour toutes les utilisations à venir, car les formulaires, on en a besoin souvent et un peu partout...)
Je suis absolument d’accord, il faut connaître la validation Front dans le détail avec tous les outils dispo et leur caractéristiques.
La délégation est aussi très pratique et maintenable.
Là je voulais faire un focus sur cet attribut en particulier.
Ton commentaire est intéressant aussi, mais je ne comprends pas tout malheureusement, peux-tu me dire s’il te plaît ce que tu entends par « l’event délégation » ? Merci 😊
@@LeValerTube L'event delegation consiste à écouter un évènement donné sur un élément parent plutôt que sur l'élément (ou les éléments) visés directement. On peut placer le listener plus ou moins "haut" par rapport à ce qui est visé, mais en général on reste sur un élément parent proche voire direct - ici, le form plutôt que chaque élément du formulaire : un seul listener pour le formulaire, au lieu d'un listener par élément du formulaire. Dans le contexte de la vidéo : l'évènement "invalid" ne "bubble" pas (il ne "remonte pas vers les éléments parents), on ne peut donc pas faire d'event delegation dessus. Mais on peut le faire pour d'autres events qui, eux, ont bien un "bubbling" (par exemple : les events "input", "focus", "click", etc.) Mais le plus simple (et là on n'est plus à proprement parler dans de l'event delegation) reste sans doute d'écouter l'event "submit" sur le form. Dans le callback, on peut dès lors facilement boucler sur les éléments du formulaire pour évaluer plus ou moins finement leur validité (input.validity / validityState) en suivant les API/méthodes natives du navigateur.
Comment ça va 👍🏾👍🏾?? J’aime bien te vidéo 🔥
Vive Yup !!! 😅
Intéressante vidéo ! 👍
Personnellement, j'ai utilisé les deux approches, sans préférence particulière.
En revanche, usage systématique de l'event delegation (car il vaut mieux éviter d'ajouter un listener sur chaque champ d'un form surtout si le form en a beaucoup) et donc : evt . target systématique (logique).
Et surtout, utilisation de "input.validity" (qui permet de gérer finement les choses : "patternMismatch", "tooLong", "tooShort", "rangeOverflow", ...) pour gérer les spécificités de chaque contrainte posée sur les champs. Et, pour faciliter les choses, un simple objet {"langue": {"type de validité" : "message", ...}, ...} pour la localisation des messages à afficher en fonction de la langue choisie par l'utilisateur (ou définie par défaut).
Je ne pense donc pas qu'il faille éviter "required" (pas plus que les autres attributs de validation, comme "maxlength" ou "pattern"), mais juste qu'il faille bien connaître toutes les propriétés et méthodes mises à disposition par les API pour gérer ce type de problème une fois pour toute (au sein d'une application et même pour toutes les utilisations à venir, car les formulaires, on en a besoin souvent et un peu partout...)