Kaherecode

Validation des formulaires en react avec Formik et Yup

Alpha Amadou Diallo
@alpha69 9 janv. 2022
2,340

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 --save

Etape 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>
    );
};    

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 start

vous serez automatiquement redirigé vers http://localhost:3000/ , si ce n’est pas le cas ouvrez votre navigateur et ouvrez le lien ci-dessus.

Webp.net-gifmaker (1).gif

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.


Partage ce tutoriel


Merci à

Alpha Amadou Diallo

Continue de lire

Discussion

Tu dois être connecté pour participer à la discussion. Me connecter.

Ibrahima Bayo
@ns2design il y a 7 mois

Big boss, félicitations et bonne continuation !

Tu dois être connecté pour participer à la discussion. Me connecter.
Alpha Amadou Diallo
@alpha69 auteur il y a 7 mois

Merci boss

Tu dois être connecté pour participer à la discussion. Me connecter.