Catégories
Plugin et site web

Validation de formulaire de réaction avec Formik et Yup – Smashing Magazine

A propos de l'auteur

Nefe est un développeur frontend qui aime apprendre de nouvelles choses et partager ses connaissances avec les autres.
Plus à propos
Nefe

Les formulaires font partie intégrante de la manière dont les utilisateurs interagissent avec nos sites Web et nos applications Web. La validation des données que l'utilisateur transmet via le formulaire est un aspect essentiel de notre travail en tant que développeurs Web. Cependant, cela ne doit pas être un processus fastidieux. Dans cet article, nous allons découvrir comment Formik gère l'état des données du formulaire, valide les données et gère l'envoi du formulaire.

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

Dans cet article, nous allons apprendre à 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 mettrons en œuvre 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.

Validation de formulaire dans React

À 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 de formulaire sans l'utilisation d'une bibliothèque

const Form = () => {
  const intialValues = { email: "", password: "" };
  const (formValues, setFormValues) = useState(intialValues);
  const (formErrors, setFormErrors) = useState({});
  const (isSubmitting, setIsSubmitting) = useState(false);
}

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

  • le formValues variable contient les données que l'utilisateur place dans les champs d'entrée.
  • le formErrors variable contient les erreurs pour chaque champ d'entrée.
  • le isSubmitting variable est un booléen qui permet de savoir si le formulaire est soumis ou non. Ce sera true uniquement lorsqu'il n'y a pas d'erreurs dans le formulaire.
const submitForm = () => {
    console.log(formValues);
  };

 const handleChange = (e) => {
    const { name, value } = e.target;
    setFormValues({ ...formValues, (name): value });
  };

const handleSubmit = (e) => {
    e.preventDefault();
    setFormErrors(validate(formValues));
    setIsSubmitting(true);
  };

const validate = (values) => {
    let errors = {};
    const regex = /^(^s@)+@(^s@)+.(^s@){2,}$/i;
    if (!values.email) {
      errors.email = "Cannot be blank";
    } else if (!regex.test(values.email)) {
      errors.email = "Invalid email format";
    }
    if (!values.password) {
      errors.password = "Cannot be blank";
    } else if (values.password.length < 4) {
      errors.password = "Password must be more than 4 characters";
    }
    return errors;
  };

useEffect(() => {
    if (Object.keys(formErrors).length === 0 && isSubmitting) {
      submitForm();
    }
  }, (formErrors));

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

  • handleChange
    Cela maintient les entrées synchronisées avec le formValues state et met à jour l'état à mesure que l'utilisateur tape.
  • validate
    Nous passons dans le formValues objet comme argument de cette fonction, puis basé sur le email et password répondant aux tests de validation, le errors l'objet est rempli et renvoyé.
  • handleSubmit
    Chaque fois que le formulaire est soumis, le formErrors La variable d'état contient toutes les erreurs qui peuvent exister à l'aide de la setFormErrors(validate(formValues)) méthode.
  • useEffect
    Ici, nous vérifions si le formErrors l'objet est vide, et si isSubmitting est true. Si cette vérification est vraie, alors le submitForm() helper est appelé. Il a une seule dépendance, qui est le formErrors objet. Cela signifie qu'il ne fonctionne que lorsque le formErrors les changements d'objet.
  • submitForm: cela gère la soumission des données du formulaire.
return (
    

Sign in to continue

{Object.keys(formErrors).length === 0 && isSubmitting && ( Signed in successfully )}
{formErrors.email && ( {formErrors.email} )}
{formErrors.password && ( {formErrors.password} )}
);

Ici, on passe dans le handleChange fonctions d'assistance aux entrées » onChange attribut. Nous lions la valeur des entrées à la formValues objet, ce qui en fait des entrées contrôlées. À partir des 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 d'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?

Depuis la documentation:

«Formik est une petite bibliothèque qui vous aide avec les 3 pièces les plus ennuyeuses dans la gestion des formulaires:

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

Formik est une bibliothèque flexible. 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 gestion 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 entrerons dans Yup et comment cela fonctionne en détail plus loin dans l'article.

const SignUpSchema = Yup.object().shape({
  firstName: Yup.string()
    .min(2, "Too Short!")
    .max(50, "Too Long!")
    .required("Firstname is required"),

  lastName: Yup.string()
    .min(2, "Too Short!")
    .max(50, "Too Long!")
    .required("Lastname is required"),

  phoneNumber: Yup.string()
    .required("Phone number is required")
    .matches(
/^((0){1}|+?(234){3})((7-9){1})((0|1){1})((d){1})((d){7})$/g,
      "Invalid phone number"
    ),

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

  password: Yup.string()
    .required("Password is required")
    .min(6, "Password is too short - should be 6 chars minimum"),
});

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

Le bac à sable suivant contient le code de la configuration de ce formulaire:

La première chose à faire est d'installer Formik.

npm i formik

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

import { Formik } from "formik";

Avant de créer le composant, nous devons créer un initialValues et validate objet 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: "",
  password: ""
};

initialValues: est un objet qui décrit les valeurs initiales des champs de formulaire respectifs. Le nom donné à chaque clé dans le initialValues doit correspondre à la valeur du nom du champ de saisie que nous voulons que Formik surveille.

const validate = (values) => {
  let errors = {};
  const regex = /^(^s@)+@(^s@)+.(^s@){2,}$/i;
  if (!values.email) {
    errors.email = "Email is required";
  } else if (!regex.test(values.email)) {
    errors.email = "Invalid Email";
  }
  if (!values.password) {
    errors.password = "Password is required";
  } else if (values.password.length < 4) {
    errors.password = "Password too short";
  }
  return errors;
};

validate: cela 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 d'entrée.

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

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 = () => {
  return (
    
      {(formik) => {
        const {
          values,
          handleChange,
          handleSubmit,
          errors,
          touched,
          handleBlur,
          isValid,
          dirty
        } = formik;
        return (
            

Sign in to continue

{errors.email && touched.email && ( {errors.email} )}
{errors.password && touched.password && ( {errors.password} )}
); }}
); };

Nous passons dans le initialValues objet, et le submitForm et validate fonctions que nous avons définies plus tôt dans Formik initialValues, onSubmit et validate accessoires respectivement.

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

  1. values
    Cela contient les valeurs des entrées utilisateur.
  2. handleChange
    Il s'agit du gestionnaire d'événements de modification d'entrée. Il est passé dans le champ de saisie . Il gère les modifications des entrées utilisateur.
  3. handleSubmit
    Le gestionnaire de soumission de formulaire. Il est passé sous la forme
    . Cela déclenche la fonction passée dans le onSubmit prop 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 que nous avons passées dans le schéma d'objet Yup.
  5. touched
    Il s'agit d'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
    C'est le onBlur gestionnaire d'événements, 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 elle, s'il y a des erreurs dans l'entrée lorsqu'elle perd le focus, les erreurs ne s'afficheront que lorsque l'utilisateur essaiera de soumettre.
  7. isValid
    Retour true s'il n'y a pas d'erreur (c.-à-d. errors l'objet est vide) et false autrement.
  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 le errors objet. 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.

En outre, nous pouvons ajouter un repère visuel au bouton. Le bouton est de style conditionnel et le désactiver s'il y a des erreurs dans le errors objet utilisant le isValid et le dirty accessoires.

Validation à l'aide des composants de Formik et yup

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

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

Nous installons Yup, importons le Field, Form, et le ErrorMessage composants de 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 qu'il y a, nous pouvons laisser cela à Yup.

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

  password: Yup.string()
    .required("Password is required")
    .min(4, "Password is too short - should be 4 chars minimum"),
});

Yup fonctionne de la même manière que nous définissons propTypes dans React. Nous avons créé un schéma d'objet avec Yup's object une fonction. Nous définissons la forme du schéma de l'objet de validation et le transmettons à Yup's shape() méthode. le required() méthode. 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:

  • Un email propriété de type chaîne et obligatoire.
  • UNE password propriété de type numérique mais non 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. Les documents vont dans les différentes méthodes de validation disponibles dans Yup.

const SignInForm = () => {
  return (
     {
        console.log(values);
      }}
    >
      {(formik) => {
        const { errors, touched, isValid, dirty } = formik;
        return (
          

Sign in to continue

); }}
); };

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 l’utilisons depuis un certain temps maintenant. Ceci est nécessaire pour que les autres composants soient utilisables.
  2. Form
    Un wrapper qui enveloppe le HTML
    élément. Il relie automatiquement le onSubmit à l'événement d'envoi du formulaire.
  3. Field
    En arrière-plan, cela lie automatiquement les entrées du formulaire onChange, onBlur et value attributs de Formik handleChange, handleBlur, et values objet 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 souhaitons utiliser as propriété. Par exemple, rendra un textarea. 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 prop. Il affiche le message d'erreur si le champ a été visité et que l'erreur existe. Par défaut, il rend une chaîne est le component prop n'est pas spécifié.

Nous passons le signInSchema dans Formik en utilisant le validationSchema soutenir. 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 ne se soucient pas de la façon dont vous gérez la validation des formulaires. Cependant, pour vous, le développeur, cela devrait être un processus aussi indolore 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 React. 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.

Ressources

Éditorial fracassant(ks, ra, yk, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *