La sous-utilisation de la validation des formulaires HTML

La faible adoption de la validation des formulaires HTML

• Les formulaires HTML disposent d’un mécanisme de validation puissant, mais il est peu utilisé. Beaucoup de personnes le connaissent mal. Cela peut être dû à un défaut de conception.

Attributs, méthodes et propriétés

• Il est possible d’ajouter l’attribut required pour empêcher une saisie vide.
• Il existe trois façons d’ajouter des contraintes à une saisie :
  • utiliser certaines valeurs spécifiques de l’attribut type : "email", "number", "url"
  • utiliser d’autres attributs de champ comme "pattern" ou "maxlength"
  • utiliser la méthode DOM setCustomValidity : c’est la méthode la plus puissante pour créer une logique de validation arbitraire et gérer des cas complexes.

Les subtilités de l’API impérative

• L’API setCustomValidity n’est proposée que sous forme de méthode, ce qui la rend peu pratique à utiliser.
• Par exemple, elle permet d’implémenter un comportement équivalent à l’attribut required afin d’empêcher l’envoi du formulaire lorsque le champ est vide.
• Si le champ est vide lors du rendu initial, il faut le définir comme invalide.

Le problème du boilerplate

• La manière de valider la valeur initiale est fastidieuse.
• La logique de validation est dupliquée entre le gestionnaire onChange et l’étape de rendu initial.
• La combinaison useRef + useLayoutEffect + onChange est complexe.

Ce qui manque

• Un attribut custom-validity est nécessaire.
• Dans les frameworks déclaratifs, il permettrait de définir puissamment la validation des champs.

La puissance de la validation asynchrone

• Il est possible de gérer le cas où un nom d’utilisateur n’est valide que s’il n’est pas déjà utilisé.
• Cela nécessite un appel asynchrone au serveur ainsi qu’un état intermédiaire.

Implémentation

• La fonction verifyUsername est utilisée pour vérifier l’unicité du nom d’utilisateur.
• useQuery est utilisé pour gérer l’état des requêtes serveur.
• La propriété customValidity est utilisée pour décrire le flux de validation asynchrone.

Formulaire de confirmation du mot de passe

• Un formulaire est implémenté dans lequel le mot de passe saisi doit être répété.
• La validation vérifie que les deux champs correspondent.

Conclusion

• setCustomValidity peut répondre à divers besoins de validation.
• Une API puissante apporte une vraie capacité d’expression.
• On peut espérer que cette fonctionnalité soit ajoutée à la spécification HTML.

Résumé de GN⁺

• La validation des formulaires HTML est puissante, mais reste mal exploitée. Cela peut être lié à la complexité de l’API.
• La méthode setCustomValidity est un outil puissant pour gérer une logique de validation complexe.
• L’article présente une manière de traiter des scénarios complexes comme la validation asynchrone.
• Ce texte fournit des informations utiles pour aider les développeurs à mieux exploiter la validation des formulaires HTML.

[GN⁺]

Avis Hacker News

• Les navigateurs web ne permettent toujours pas de modifier le style des messages de validation HTML intégrés, et Chrome comme Firefox ne suivent pas les directives UI des plateformes OS, ce qui entre en conflit avec l’esthétique des projets

  • Chrome permettait auparavant de modifier le style des messages de validation via des sélecteurs de pseudo-éléments avec préfixe fournisseur, mais cette fonctionnalité a été supprimée
  • Des plaintes portent sur l’utilisation peu efficace des listes déroulantes HTML et de <select multiple>

• L’utilisation de certaines valeurs de l’attribut type (par ex. "email", "number", "url") peut déclencher le clavier optimal sur mobile et améliorer considérablement l’expérience utilisateur

• Les personnes qui rédigent les spécifications sont déconnectées de l’usage réel ; c’est adapté aux choses simples, mais pour les formulaires complexes, mieux vaut les écrire soi-même

• Regret d’avoir négligé la simplicité fondamentale des formulaires, et remerciements pour le partage d’un autre point de vue

• Demande d’ajouter l’attribut "for" aux libellés des cases à cocher afin qu’un clic sur le libellé puisse activer/désactiver la case

• Fournit un exemple simple sans utiliser React

  • HTMLObjectElement.setCustomValidity

• La validation des formulaires HTML est excellente, mais il y a un gros problème : elle ne fonctionne pas sur Firefox pour Android

  • Bug associé

• De nombreux frameworks et bibliothèques proposent des fonctions de validation personnalisables en style, donc inutile de se compliquer la vie

• Il faut faire attention à ne pas abuser de la validation

  • Expérience d’un remboursement Groupon nécessitant « au moins 15 mots », au point de devoir vérifier le HTML
  • Le motif de validation n’autorisait aucune ponctuation

• Les sites qui utilisent à tort type=password pour la saisie 2FA perturbent les gestionnaires de mots de passe et les navigateurs