Validation de formulaires React avec Formik et Yup

React ? Les formulaires ? Don’t worry, je maîtrise… Bien que cela sonne comme une évidence pour bon nombre de développeurs, mettre en place de jolis formulaires sur son projet web n’est pas toujours chose aisée. Comment dois-je gérer les liaisons des données ? Comment puis-je réaliser une validation de chacun de mes champs sans dupliquer mon code ? QUID de l’interface utilisateur et de l’affichage des erreurs ? Et quand on sait que certains projets peuvent nécessiter la mise en place d’une dizaine de formulaires, mieux vaut bien préparer son coup avant de se lancer dans une interminable session de duplication de code. Amis développeurs React ou gestionnaires de projet en quête de gain productivité, cet article peut va vous intéresser.

Une librairie pour gérer mes formulaires ? Tu plaisantes j’espère…

Pour toutes les raisons que j’ai précédemment évoqué, je vous ai dégoté une bibliothèque très utile et très simple à prendre en main (croyez-moi, la courbe d’apprentissage n’est vraiment pas ardue) : Formik. Ok, les plus pointilleux d’entre vous me diront que React Hooks commence à pointer le bout de son nez, et cela va considérablement améliorer la gestion des méthodes et des états de cycle de vie (les fameuses “lifecycle methods”). Il sera alors beaucoup plus facile de gérer nos formulaires. Remarques auxquelles je répondrai : “Et oui, Jamy, mais pourquoi réinventer la roue ? Pourquoi vouloir faire du bricolage et ainsi réaliser un code totalement dépendant de ton projet ? Ne serait-il pas plus pertinent de découper ta logique pour l’exploiter sur d’autres projets ?"   Inutile donc de perdre notre temps à “bricoler”, définissons plutôt une seule et unique solution pour gérer nos formulaires afin de la réutiliser de projet en projet. "Et si je veux utiliser Redux moi ?" Pas besoin l’ami ! Les valeurs de formulaires sont généralement stockées dans un état local, pas global…

Formik alors ? C’est quoi ce nom WTF ?!

Je vous le concède, il y a mieux comme nom. Mais cet outil va vous éviter de vous arracher les cheveux en :

1. obtenant les valeurs de votre formulaire sans vous soucier de l’état
2. personnalisant vos messages de validation et d’erreur
3. traitant la soumission de votre formulaire

Vous l’avez compris, votre code devient beau, concis et réutilisable ! Le principal atout : les valeurs de nos formulaires ne sont pas stockées dans l’état (stateless). Pas de data-binding manuel, Formik fait ça pour vous automatiquement !

Comment ça fonctionne ?

En encapsulant votre formulaire dans un composant Formik, l’enfant devient alors une fonction. Cette dernière prend en argument une variété de propriétés Formik pour gérer l’état (handleSubmit, initialValues…) : Notre formulaire prêt, il faut lui associer des champs. Autrement dit, il faut prévoir de gérer la validation de chacun d’entres eux. S’il s’agit d’un champ date, nous voudrions alors pouvoir lui appliquer une règle qui consiste à n'accepter que des formats date, si c’est une adresse email, une chaine de caractère qui comporte le caractère @, etc, etc….

La validation avec Yup

C’est ce qui est préconisé par Formik. Vous êtes libre d’utiliser une autre solution de validation que Yup, mais ce serait vous mettre des bâtons dans les roues. Formik est conçu pour fonctionner avec Yup, notamment avec sa propriété validationSchema. Celle-ci va se charger de transformer les erreurs en objet et les met en correspondance avec leurs valeurs et leurs fonctions. Et encore une fois, Formik fait tout ça pour vous… Avec Yup, vous pouvez utiliser les règles déjà prédéfinies (les plus classiques), ou composer vous-même vos propres REGEX pour des validations plus complexes, et ça, c’est vachement cool. Petite astuce : créez votre validation Yup séparément (dans un dossier Validations par exemple) et importer votre configuration dans votre fichier affichant votre formulaire. On gagne en lisibilité et on obtient de ce fait un code modulaire, CQFD…

Formik validationSchema={signupValidation}

Pour afficher les erreurs sur l’UI, il faut dupliquer le code suivant pour chaque champ (oui, c’est la petite contrainte, mais avec tout le travail que Formik et Yup vous mâchent, on accepte non ?!) :

Pour résumer

React + Formik + Yup = Gain de temps considérable ! Mettre en place un formulaire avec validation devient un jeu d’enfant. Votre code gagnera à coup sûr en lisibilité ! Vous pourrez séparer votre logique de validation, gérer la liaison de vos données sans vous occuper de l’état et binder automatiquement les messages d’erreur. La bibliothèque commence à se faire à nom dans la communauté React et compte actuellement plus de 250 000 téléchargement hebdomadaires ! La validation Yup propose les règles de base (max, min, email, etc.) pour gérer vos champs et se marie parfaitement avec Formik. Les formulaires deviennent un souci de moins à gérer dans votre projet. Chez TROISPOINTZERO, on valide !