À propos de l'auteur

Nefe est un développeur Frontend qui aime apprendre de nouvelles choses et partager ses connaissances avec les autres.
En savoir plus sur
Nefe
…

En tant que développeurs, il est de notre devoir de nous assurer que lorsque les utilisateurs interagissent avec les formulaires que nous configurons, les données qu'ils envoient sont sous la forme que nous attendons.

Dans cet article, nous allons apprendre comment gérer la validation de formulaire et suivre l'état des formulaires sans l'aide d'une bibliothèque de formulaires.
Ensuite, nous verrons comment fonctionne la bibliothèque Formik. Nous allons découvrir comment l'utiliser de manière incrémentielle avec des champs de saisie HTML et des règles de validation personnalisées. Ensuite, nous mettrons en place la validation de formulaire à l'aide des composants personnalisés de Yup et Formik et comprendrons comment Yup fonctionne bien avec Formik dans la gestion de la validation de formulaire. Nous implémenterons ces méthodes de validation de formulaire pour valider un formulaire d'inscription simple que j'ai mis en place.

Remarque: Cet article nécessite une compréhension de base de React.

Form Validation In React [19659003] À lui seul, React est suffisamment puissant pour que nous puissions mettre en place une validation personnalisée pour nos formulaires. Voyons comment procéder. Nous allons commencer par créer notre composant de formulaire avec les valeurs d'état initiales. Le bac à sable suivant contient le code de notre formulaire:

Validation du formulaire sans l'utilisation d'une bibliothèque

 const Form = () => {
  const intialValues ​​= {email: "", mot de passe: ""};
  const [formValues, setFormValues] = useState (intialValues);
  const [formErrors, setFormErrors] = useState ({});
  const [isSubmitting, setIsSubmitting] = useState (faux);
} 

Avec le hook useState nous définissons des variables d'état pour formValues ​​ formErrors et isSubmitting .

• Le formValues ​​ contient les données que l'utilisateur place dans les champs d'entrée.
• La variable formErrors contient les erreurs pour chaque champ d'entrée.
• La variable isSubmitting est un booléen qui permet de savoir si le formulaire est soumis ou non. Ce ne sera vrai que s'il n'y a aucune erreur dans le formulaire.

 const submitForm = () => {
    console.log (formValues);
  };

 const handleChange = (e) => {
    const {nom, valeur} = e.target;
    setFormValues ​​({... formValues, [name]: valeur});
  };

const handleSubmit = (e) => {
    e.preventDefault ();
    setFormErrors (valider (formValues));
    setIsSubmitting (vrai);
  };

const validate = (valeurs) => {
    laissez les erreurs = {};
    const regex = /^[19459108—2012+@[19459108[19459108.) .[19459108 .{2,}$/i;
    if (! values.email) {
      errors.email = "Ne peut pas être vide";
    } else if (! regex.test (values.email)) {
      errors.email = "Format d'e-mail non valide";
    }
    if (! values.password) {
      errors.password = "Ne peut pas être vide";
    } else if (values.password.length  {
    if (Object.keys (formErrors) .length === 0 && isSubmitting) {
      soumettre le formulaire();
    }
  }, [formErrors]); 

Ici, nous avons 4 gestionnaires de formulaires et un useEffect mis en place pour gérer les fonctionnalités de notre formulaire.

• handleChange
  Ceci conserve les entrées en synchronisation avec l'état formValues ​​ et met à jour l'état en tant que types d'utilisateurs.
• validate
  Nous passons l'objet formValues ​​ comme argument de cette fonction, puis, sur la base de l'e-mail et du mot de passe répondant aux tests de validation, l'objet errors est renseigné et renvoyé.
• handleSubmit
  Chaque fois que le formulaire est soumis, la variable d'état formErrors contient les erreurs qui peuvent exister en utilisant la méthode setFormErrors (validate (formValues)) .
• useEffect
  Ici, nous vérifions si l'objet formErrors est vide, et si isSubmitting est vrai . Si cette vérification est vraie, alors l'assistant submitForm () est appelé. Il a une dépendance unique, qui est l'objet formErrors . Cela signifie qu'il ne s'exécute que lorsque l'objet formErrors change.
• submitForm : il gère la soumission des données du formulaire.

 return (
    

      
 Connectez-vous pour continuer 
      {Object.keys (formErrors) .length === 0 && isSubmitting && (
         Connexion réussie 
      )}
      

        

           E-mail 
          
           {formErrors.email && (
             {formErrors.email} 
          )}
        
        

           Mot de passe 
          
           {formErrors.password && (
             {formErrors.password} 
          )}
        
         Connexion 
      
    
  ); 

Ici, nous passons les fonctions d'assistance handleChange à l'attribut onChange des entrées. Nous lions la valeur des entrées à l'objet formValues ​​ce qui en fait des entrées contrôlées. D'après les documents React les entrées contrôlées sont des entrées dont les valeurs sont contrôlées par React . Un style d'erreur d'entrée est appliqué s'il existe des erreurs liées à ce champ d'entrée spécifique. Un message d'erreur est affiché conditionnellement sous chaque entrée s'il y a des erreurs liées à ce champ d'entrée spécifique. Enfin, nous vérifions s'il y a des erreurs dans l'objet erreurs et si isSubmitting est vrai. Si ces conditions sont remplies, nous affichons un message informant l'utilisateur qu'il s'est connecté avec succès.

Avec cela, nous avons un formulaire entièrement fonctionnel et validé mis en place sans l'aide d'une bibliothèque. Cependant, une bibliothèque de formulaires comme Formik à l'aide de Yup peut simplifier la complexité de la gestion des formulaires pour nous.

Que sont Formik et Yup?

Extrait de la documentation :

«Formik est une petite bibliothèque qui vous aide avec les 3 éléments les plus ennuyeux dans la gestion des formulaires:

1. Obtenir des valeurs dans et hors de l'état du formulaire.
2. Validation et messages d'erreur
3. Gestion de la soumission de formulaires.

Formik est un outil flexible bibliothèque. Il vous permet de décider quand et dans quelle mesure vous souhaitez l'utiliser. Nous pouvons contrôler la quantité de fonctionnalités de la bibliothèque Formik que nous utilisons. Il peut être utilisé avec des champs de saisie HTML et des règles de validation personnalisées, ou Yup et les composants personnalisés qu'il fournit. Formik facilite la validation des formulaires! Lorsqu'ils sont associés à Yup, ils résument toutes les complexités qui entourent la manipulation des formulaires dans React.

Yup est un validateur de schéma d'objet JavaScript. Bien qu'il comporte de nombreuses fonctionnalités puissantes, nous nous concentrerons sur la manière dont il nous aide à créer des règles de validation personnalisées afin que nous n'ayons pas à le faire. Ceci est un exemple de schéma d'objet Yup pour un formulaire d'inscription. Nous aborderons Yup et son fonctionnement en détail plus loin dans l'article.

 const SignUpSchema = Yup.object (). Shape ({
  prénom: Yup.string ()
    .min (2, "Trop court!")
    .max (50, "Trop long!")
    .required ("Le prénom est obligatoire"),

  nom de famille: Yup.string ()
    .min (2, "Trop court!")
    .max (50, "Trop long!")
    .required ("Le nom est obligatoire"),

  phoneNumber: Yup.string ()
    .required ("Le numéro de téléphone est requis")
    .allumettes(
/ ^ ([0] {1} |  +? [234] {3}) ([7-9] {1}) ([0|1] {1}) ([d] {1}) ([d] {7 }) $ / g,
      "Numéro de téléphone invalide"
    ),

  email: Yup.string (). email (). required ("Email is required"),

  mot de passe: Yup.string ()
    .required ("Le mot de passe est requis")
    .min (6, "Le mot de passe est trop court - doit contenir au minimum 6 caractères"),
}); 

Formik, champs de saisie HTML et règles de validation personnalisées

Le sandbox contient le code de la configuration de ce formulaire:

La première chose à faire est installez Formik .

 npm i formik 

Ensuite, nous pouvons continuer à l'importer dans le fichier où nous allons l'utiliser.

 import {Formik} de "formik"; 

Avant de créer le composant, nous devons créer un objet initialValues ​​ et validate que nous passerons comme accessoires au composant Formik lors de sa configuration. initialValues ​​ et validate sont des extraits de code, pas des mots normaux.

La décision de faire cela en dehors du composant n'est pas une décision technique, mais plutôt pour la lisibilité de notre code.

 ] const initialValues ​​= {
  email: "",
  mot de passe: ""
}; 

initialValues ​​: est un objet qui décrit les valeurs initiales des champs de formulaire respectifs. Le nom donné à chaque clé dans initialValues ​​ doit correspondre à la valeur du nom du champ d'entrée que Formik doit surveiller.

 const validate = (values) => {
  laissez les erreurs = {};
  const regex = /^[19459108[/19459108 )+@[19459108 .+ .[19459108 .{2,}$/i;
  if (! values.email) {
    errors.email = "Un e-mail est requis";
  } else if (! regex.test (values.email)) {
    errors.email = "Email invalide";
  }
  if (! values.password) {
    errors.password = "Le mot de passe est requis";
  } else if (values.password.length <4) {
    errors.password = "Mot de passe trop court";
  }
  renvoyer des erreurs;
}; 

validate : ceci accepte une fonction qui gère la validation du formulaire. La fonction accepte un objet sous la forme de valeurs de données comme argument et valide chaque propriété de l'objet en fonction des règles définies. Chaque clé de l'objet values ​​doit correspondre au nom du champ de saisie.

 const submitForm = (values) => {
  console.log (valeurs);
}; 

onSubmit : Cela gère ce qui se passe après la soumission de l'utilisateur. La prop onSubmit prend une fonction de rappel qui ne s'exécutera qu'en l'absence d'erreurs, ce qui signifie que les entrées utilisateur sont valides.

 const SignInForm = () => {
  revenir (
    
      {(formik) => {
        const {
          valeurs,
          handleChange,
          handleSubmit,
          les erreurs,
          touché,
          poignéeBlur,
          est valable,
          sale
        } = formik;
        revenir (
            

              
 Connectez-vous pour continuer 
              

                

                   E-mail 
                  
                   {errors.email && touched.email && (
                     {errors.email} 
                  )}
                

                

                   Mot de passe 
                  
                   {errors.password && touched.password && (
                     {errors.password} 
                  )}
                

                
                   Connexion
                
              
            
        );
      }}
    
  );
}; 

Nous passons dans l'objet initialValues ​​et les fonctions submitForm et validate que nous avons définies précédemment dans initialValues ​​ de Formik, onSubmit et valident respectivement les accessoires .

En utilisant le modèle d'accessoires de rendu, nous avons accès à encore plus d'accessoires fournis par l'API Formik.

1. valeurs
   Cela contient les valeurs de les entrées utilisateur.
2. handleChange
   Il s'agit du gestionnaire d'événement de changement d'entrée. Il est passé dans le champ de saisie . Il gère les changements des entrées utilisateur.
3. handleSubmit
   Le gestionnaire de soumission de formulaire. Il est passé sous la forme
   
   . Ceci déclenche la fonction transmise à l'accessoire onSubmit chaque fois que le formulaire est soumis.
4. errors
   Cet objet contient les erreurs de validation qui correspondent à chaque champ d'entrée et est rempli avec les définitions nous sommes passés dans le schéma d'objet Yup.
5. touched
   C'est un objet qui regarde si un champ de formulaire a été touché. Chaque clé correspond au nom des éléments d'entrée et a une valeur booléenne.
6. handleBlur
   Il s'agit du gestionnaire d'événements onBlur et il est passé au champ d'entrée . Lorsque l'utilisateur supprime le focus d'une entrée, cette fonction est appelée. Sans lui, s'il y a des erreurs dans l'entrée quand elle perd le focus, les erreurs ne s'afficheront que lorsque l'utilisateur essaiera de soumettre.
7. isValid
   Renvoie true s'il n'y a pas erreurs (ie l'objet errors est vide) et false sinon.
8. dirty
   Cet accessoire vérifie si notre formulaire a été touché ou non. Nous pouvons l'utiliser pour désactiver notre bouton d'envoi lors du chargement initial du formulaire.

Lorsque le formulaire est soumis, Formik vérifie s'il y a des erreurs dans l'objet errors . Si tel est le cas, il abandonne la soumission et affiche les erreurs. Pour afficher l'étendue à l'aide d'entrées HTML, nous rendons et stylisons conditionnellement le message d'erreur de chaque champ d'entrée respectif si le champ a été touché et qu'il y a des erreurs pour ce champ.

 
      Se connecter
 

Nous pouvons également ajouter un repère visuel au bouton. Le bouton a un style conditionnel et le désactiver s'il y a des erreurs dans l'objet errors utilisant les accessoires isValid et dirty .

Validation à l'aide des composants de Formik Et Oui

Ce bac à sable contient le code final de cette configuration.

 npm i yup
import {Formik, Form, Field, ErrorMessage} depuis "formik";
import * as Yup from "yup"; 

Nous installons Yup, importons le Field Form et les composants ErrorMessage from Formik.

Formik facilite la validation des formulaires! Lorsqu'ils sont associés à Yup, ils résument toutes les complexités qui entourent la gestion des formulaires dans React. Avec cela, nous pouvons ensuite créer le schéma que nous utiliserons pour le formulaire de connexion à l'aide de Yup. Au lieu de créer des validations personnalisées pour chaque champ de saisie possible, ce qui peut être fastidieux, en fonction du nombre de champs, nous pouvons laisser Yup gérer cela.

 const SignInSchema = Yup.object (). Shape ({
  email: Yup.string (). email (). required ("Email is required"),

  mot de passe: Yup.string ()
    .required ("Le mot de passe est requis")
    .min (4, "Le mot de passe est trop court - doit comporter au minimum 4 caractères"),
}); 

Yup fonctionne de la même manière que nous définissons propTypes dans React. Nous avons créé un schéma d’objet avec la fonction objet de Yup . Nous définissons la forme du schéma de l'objet de validation et la passons à la méthode shape () de Yup. La méthode requise () . Cette méthode prend une chaîne comme argument, et cette chaîne sera le message d'erreur. qui s'affiche chaque fois qu'un champ obligatoire est laissé vide.

Ce schéma a deux propriétés:

• Une propriété email qui est un type chaîne et est obligatoire.
• A password ] propriété qui est de type nombre mais n'est pas obligatoire.

Nous pouvons enchaîner la validation est Yup comme vu ci-dessus. Les propriétés de l'objet de schéma correspondent au nom des champs d'entrée. La documentation traite des différentes méthodes de validation disponibles dans Yup.

 const SignInForm = () => {
  revenir (
     {
        console.log (valeurs);
      }}
    >
      {(formik) => {
        const {erreurs, touché, isValid, dirty} = formik;
        revenir (
          

            
 Connectez-vous pour continuer 
            

              

                 E-mail 
                
                
              

              

                 Mot de passe 
                
                
              

              
                 Connectez-vous
              
            
          
        );
      }}
    
  );
}; 

Tout en utilisant les champs de saisie HTML pour faire le travail, les composants personnalisés de Formik nous facilitent encore plus les choses et réduisent la quantité de code que nous devons écrire! Quels sont ces composants personnalisés que Formik nous fournit?

1. Formik
   Nous utilisons cela depuis un certain temps maintenant. Ceci est nécessaire pour que les autres composants soient utilisables.
2. Formulaire
   Un wrapper qui enveloppe l'élément HTML
   
   . Il lie automatiquement la méthode onSubmit à l'événement d'envoi du formulaire.
3. Champ
   En arrière-plan, cela relie automatiquement les entrées du formulaire onChange onBlur et value aux objets de Formik handleChange handleBlur et values ​​ respectivement. Il utilise le nom prop pour correspondre à l'état et maintient automatiquement l'état synchronisé avec la valeur d'entrée. Avec ce composant, nous pouvons décider de l’afficher en tant que champ d’entrée que nous voulons en utilisant comme propriété . Par exemple, rendra une zone de texte . Par défaut, il rend un champ de saisie HTML.
4. ErrorMessage
   Il gère le rendu du message d'erreur pour son champ respectif en fonction de la valeur donnée au nom prop, qui correspond au nom de soutenir. Il affiche le message d'erreur si le champ a été visité et que l'erreur existe. Par défaut, il restitue une chaîne si le composant prop n'est pas spécifié.

Nous passons le signInSchema dans Formik en utilisant le validationSchema prop. L'équipe Formik adore la bibliothèque de validation Yup et a donc créé un accessoire spécifique pour Yup appelé validationSchema qui transforme les erreurs en objets et correspond à leurs valeurs et fonctions touchées.

Conclusion

Les utilisateurs ne savent pas ou attention à la façon dont vous gérez la validation du formulaire Cependant, pour vous le développeur, cela devrait être un processus aussi simple que possible, et je pense que Formik se distingue comme un choix solide à cet égard.

Nous avons examiné avec succès certaines des options qui s'offrent à nous lors de la validation des formulaires dans Réagir. Nous avons vu comment Formik peut être utilisé de manière incrémentielle et comment il se marie bien avec Yup dans la gestion de la validation de formulaire.

Resources

(ks, ra, yk, il)