16.5 Ajouter des Vérifications dans un Formulaire en React

Vérifications Formulaire React est une étape cruciale pour garantir que vos applications web recueillent des informations précises et réduisent les erreurs utilisateurs. En configurant des vérifications efficaces, vous pouvez améliorer l’interaction utilisateur tout en assurant l’intégrité des données collectées. Découvrez comment implémenter des vérifications dans React à l’aide d’exemples pratiques.

Introduction à l’Ajout de Vérifications dans les Formulaires React

Dans le développement d’applications React, la gestion des formulaires est une compétence essentielle. Ajouter des vérifications permet non seulement d’améliorer l’expérience utilisateur mais également d’assurer la validité des données collectées. Ce tutoriel vous guidera à travers les concepts fondamentaux et les techniques avancées pour intégrer des vérifications dans vos formulaires, en utilisant React Hooks et des bibliothèques tierces.

Créer un Formulaire de Base en React

Commençons par créer un formulaire basique. Nous utiliserons le hook useState pour gérer l’état de notre formulaire :

import React, { useState } from 'react';

function BasicForm() {
  const [formData, setFormData] = useState({ username: '', email: '' });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // Logique de soumission
    console.log('Données du formulaire:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="username"
        value={formData.username}
        onChange={handleChange}
        placeholder="Nom d'utilisateur"
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="Email"
      />
      <button type="submit">Soumettre</button>
    </form>
  );
}

export default BasicForm;

Validation de Formulaire avec React Hooks

Le hook useState nous permet de déterminer si les données d’entrées sont valides. Ajoutons une fonction de validation basique :

const validate = (name, value) => {
  switch (name) {
    case 'username':
      return value.length >= 3 ? '' : 'Le nom d’utilisateur doit comporter au moins 3 caractères.';
    case 'email':
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return emailRegex.test(value) ? '' : 'L’adresse e-mail n’est pas valide.';
    default:
      return '';
  }
};

Nous devons maintenant incorporer cette validation dans notre gestion des changements de champ :

const [errors, setErrors] = useState({});

const handleChange = (event) => {
  const { name, value } = event.target;
  const error = validate(name, value);
  setErrors({ ...errors, [name]: error });
  setFormData({ ...formData, [name]: value });
};

Afficher les Messages d’Erreur

Pour une meilleure expérience utilisateur, les messages d’erreur doivent être affichés immédiatement:

<div>
  <input
    type="text"
    name="username"
    value={formData.username}
    onChange={handleChange}
    placeholder="Nom d'utilisateur"
  />
  {errors.username && <span className="error">{errors.username}</span>}
</div>

<div>
  <input
    type="email"
    name="email"
    value={formData.email}
    onChange={handleChange}
    placeholder="Email"
  />
  {errors.email && <span className="error">{errors.email}</span>}
</div>

Utilisation de Bibliothèques pour les Vérifications

Pour des fonctionnalités plus avancées, vous pouvez utiliser des bibliothèques dédiées such as formik et yup. Formik facilite la gestion des données de formulaire, tandis que Yup valide les champs.

import { useFormik } from 'formik';
import * as Yup from 'yup';

const formik = useFormik({
  initialValues: { username: '', email: '' },
  validationSchema: Yup.object({
    username: Yup.string().min(3, 'Le nom d’utilisateur doit comporter au moins 3 caractères.').required('Requis'),
    email: Yup.string().email('L’adresse e-mail n’est pas valide.').required('Requis'),
  }),
  onSubmit: values => {
    console.log('Données du formulaire:', values);
  }
});

return (
  <form onSubmit={formik.handleSubmit}>
    <input
      type="text"
      name="username"
      value={formik.values.username}
      onChange={formik.handleChange}
    />
    {formik.errors.username && <span className="error">{formik.errors.username}</span>}
    <input
      type="email"
      name="email"
      value={formik.values.email}
      onChange={formik.handleChange}
    />
    {formik.errors.email && <span className="error">{formik.errors.email}</span>}
    <button type="submit">Soumettre</button>
  </form>
);

Conclusion sur les Vérifications Formulaire React

En incorporant des vérifications dans vos formulaires React, vous créez une expérience utilisateur plus robuste et agréable. Que vous choisissiez d’implémenter des vérifications manuelles ou d’utiliser des bibliothèques telles que Formik et Yup, le résultat est un formulaire React plus fiable et interactif. Pour approfondir vos connaissances, explorez notre guide sur les avantages de React ou apprenez à créer votre première application React. Si vous êtes curieux de connaître les différences entre les applications à page unique et multipages, consultez notre article détaillé. Bonne pratique du code !

Pour ceux qui souhaitent approfondir leurs connaissances en React, vous pouvez également découvrir nos articles sur les meilleurs logiciels pour développer avec React et les extensions indispensables pour optimiser votre développement.

N’oubliez pas que dans React, le choix entre les composants par classe et fonction peut également influencer la manière dont vous allez gérer vos formulaires et validations.