Hello, bienvenue! dans ce tutorirel, dans le quel nous allons voir ensemble comment valider un formulaire en react en utilisant Formik et Yup.
Dans ce tutoriel , nous allons voir comment valider un formulaire d’inscription avec Formik et Yup. Nous allons utiliser également Bootstrap pour la mise en forme.
Formik est une bibliothèque conçu pour gérer des formulaires avec une validation complexe ou simple. Formik supporte la validation synchrone et asynchrone au niveau du formulaire et du champ.
Les formulaires nous permettent de récuperer les données des utilisateurs tels que le nom, l’email,... . Avant d’envoyer ces données au service web il est important de les valider pour vérifier la cohérence par rapport à ce que le service web attend car les utilisateurs ne saisissent pas toujours ce qui est attendu. Vu que l’objectif de ce tutoriel n’est pas de vous parler de l’importance de la validation formulaire mais plutôt de vous montrer comment valider un formulaire donc allons droit au but.
Etape 1: Créez l’application react et installez les modules necessaires
npx create-react-app react-formik
cd react-formik
npm install bootstrap
npm install formik yup --saveEtape 2: Ouvrir le fichier App.Js et Importez en premier les bibliothèques necessaires
import React from 'react';
import {Formik, Field, Form, ErrorMessage} from 'formik';
import * as Yup from 'yup';
import "bootstrap/dist/css/bootstrap.css";Etape 3: Ecrire votre schema de validation
Nous allons utiliser Yup, pour écrire notre schema de validation
const validationSchema = Yup.object().shape({
firstName: Yup.string()
.min(5, "trop petit")
.max(50, "trop long!")
.required("Ce champ est obligatoire"),
lastName: Yup.string()
.min(2, "trop petit")
.max(10, "trop long!")
.required("Ce champ est obligatoire"),
email: Yup.string()
.email("email invalide")
.required("l'email est obligatoire"),
password: Yup.string()
.required("Mot de passe est obligatoire")
.min(8, "Mot de passe doit être plus grand que 8 caractères")
.max(50, "Mot de passe doit être plus petit que 50 caractères"),
confirmPassword: Yup.string()
.required("Confirmation de mot de passe est obligatoire")
.oneOf(
[Yup.ref("password"), null],
"Le mot de passe de confirmation ne correspond pas"
),
acceptTerms: Yup.bool().oneOf([true], "Accepter les conditions est obligatoire"),
});validationSchema : fonction pour gérer la validation. Elle reçoit les valeurs des données du formulaire et valide chaque propriété en fonction des règles définies. Chaque clé de l'objet doit correspondre au nom du champ de saisie Formik.
Etape 4: Création de la variable initialValues:
const initialValues = {
firstName: "",
lastName: "",
email: "",
password: "",
confirmPassword: "",
acceptTerms: false,
};initialValues : est un objet qui contient les valeurs initiales des champs du formulaire. Chaque propriété de l'objet doit correspondre au nom du champ de saisie Formik.
Etape 5: Création du formulaire:
const handleSubmit = (values) => {
console.log(values)
};
const App = () => {
return (
<div className="container">
<div className="row">
<div className="col-md-6 offset-md-3 pt-3">
<h1 className="text-center">Inscription</h1>
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={(values) =>handleSubmit(values)}
>
{({ resetForm }) => (
<Form>
<div className="form-group mb-3">
<label htmlFor="firstName">
Prénoms:
</label>
<Field
type="text"
id="firstName"
name="firstName"
className="form-control"
/>
<ErrorMessage
name="firstName"
component="small"
className="text-danger"
/>
</div>
<div className="form-group mb-3">
<label htmlFor="lastName">
Nom:
</label>
<Field
type="text"
id="lastName"
name="lastName"
className="form-control"
/>
<ErrorMessage
name="lastName"
component="small"
className="text-danger"
/>
</div>
<div className="form-group mb-3">
<label htmlFor="email">
Email:
</label>
<Field
type="email"
id="email"
name="email"
className="form-control"
/>
<ErrorMessage
name="email"
component="small"
className="text-danger"
/>
</div>
<div className="form-group mb-3">
<label htmlFor="password">
Mot de passe:
</label>
<Field
type="password"
id="password"
name="password"
className="form-control"
/>
<ErrorMessage
name="password"
component="small"
className="text-danger"
/>
</div>
<div className="form-group mb-3">
<label htmlFor="confirmPassword">
Confirmer le mot de
passe:
</label>
<Field
type="password"
id="confirmPassword"
name="confirmPassword"
className="form-control"
/>
<ErrorMessage
name="confirmPassword"
component="small"
className="text-danger"
/>
</div>
<div className="form-group form-check mb-5">
<Field
name="acceptTerms"
type="checkbox"
className="form-check-input"
/>
<label
htmlFor="acceptTerms"
className="form-check-label"
>
J'ai lu et j'accepte
les conditions
</label>
<ErrorMessage
name="acceptTerms"
component="small"
className="text-danger d-block"
/>
</div>
<div className="form-group d-flex justify-content-end gap-3">
<button
type="submit"
className="btn btn-primary"
>
S'inscrire
</button>
<button
type="button"
onClick={resetForm}
className="btn btn-danger"
>
Annuler
</button>
</div>
</Form>
)}
</Formik>
</div>
</div>
</div>
);
}; handleSubmit : est une fonction qui gére la soumission du formulaire. Elle reçoit la fonction callback qui sera exécutée lorsque la validation aura passé sans erreur.
Form : est une enveloppe de l'élément HTML <form>.
Field : represente le champ de saisie, il lie automatiquement vos entrées à Formik. Il utilise l’attribut name pour correspondre à l’état de formik.
Par défaut, il retourne l’element HTML <input />.
Si vous voulez un autre élement, vous utiliserez juste l’attribut as en specifiant l’élement HTML que vous voulez comme ceci:
<Field as="select" /> ou <Field as="textarea" />ErrorMessage : est un composant qui retourne le message d'erreur d’un champ donné si ce dernier a été touché. Il se base sur l'attribut name correspondant au nom du champ. Par défaut, il retourne une chaîne de caractères si l'attribut component n'est pas spécifié.
resetForm: renitialise les champs du formulaires à leurs valeurs initiales.
Voilà nous tendons vers la fin de ce tutoriel, il vous reste juste à lancer votre application pour voir le rendu final juste en tapant:
npm startvous serez automatiquement redirigé vers http://localhost:3000/ , si ce n’est pas le cas ouvrez votre navigateur et ouvrez le lien ci-dessus.
Vous pourrez voir le code source et le rendu ici directement.
Enfin , je crois que ce tutoriel vous a permis d’avoir les connaissances de base pour valider un formulaire avec formik. Si vous voulez aller au délà vous pouvez visiter la documentation officielle de Formik ici .
Nous allons terminer par cette phrase: Never Trust User Input(Ne jamais faire confiance aux données entrées par l'utilisateur en français).
Merci , j’espère que vous avez aimé le tutoriel. N’oubliez pas de me laisser un petit commentaire d’encouragement.
Participe à la discussion