Validation du formulaire avec YUP

Simplifiez la validation de votre formulaire dans React avec Yup

Lors de la création d'applications Web, la validation des formulaires est essentielle pour garantir l'intégrité des données. Si vous recherchez un moyen simple mais puissant de valider des formulaires dans React, Yup est votre meilleur ami ! Ce blog vous guidera à travers les étapes de configuration de Yup et de création d'un formulaire soigné avec validation.

---

Ce que vous apprendrez

À la fin de ce blog, vous saurez comment :

1. Configurez Yup pour la validation dans React.
2. Créez un formulaire avec des règles de validation.
3. Stylisez votre formulaire en utilisant du CSS externe.

---

Conditions préalables

Avant de plonger, assurez-vous d'avoir :

• Connaissance de base de React.
• Node.js installé sur votre ordinateur.

---

Étape 1 : Configuration de Yup

Tout d’abord, installez Yup dans votre projet React. Exécutez la commande suivante dans votre terminal :

npm install yup

Étape 2 : Création du formulaire

Voici un formulaire simple avec des champs pour un nom et une adresse e-mail. Nous utiliserons useState de React pour gérer les valeurs d'entrée et les erreurs.

import React, { useState } from 'react';

function MyForm() {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({});

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

  const handleSubmit = (e) => {
    e.preventDefault();
    // Validation will go here
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>Email:</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

Étape 3 :

Il est maintenant temps d'intégrer Yup. Je vais créer un schéma de validation, puis vérifier les données du formulaire une fois soumises.

import * as Yup from "yup"

const validationSchema = Yup.object({
name: Yup.string().required('Name is required!')
email: Yup.string().email('Your email is invalid').required('email is required')
})

J'utiliserai ce schéma dans la fonction handleSubmit pour valider le formulaire

  const handleSubmit = (e) => {
    e.preventDefault();
    try {
    await validationSchema.validate(formData, { abortEarly: false });
    setErrors({});
    alert('Form is valid!');
  } catch (err) {
    const newErrors = {};
    err.inner.forEach((error) => {
      newErrors[error.path] = error.message;
    });
    setErrors(newErrors);
  }
  };

Étape 4 : Styliser le formulaire

Pour donner une belle apparence au formulaire, créez un fichier CSS externe (MyForm.css) et ajoutez ces styles :

.form-container {
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.label {
  font-weight: bold;
}
.input {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  border-radius: 4px;
}
.error {
  color: red;
  font-size: 12px;
}
.button {
  background: #4caf50;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.button:hover {
  background: #45a049;
}

Importez le fichier CSS dans votre composant :

import './MyForm.css';

Code complet :

import React, { useState } from 'react';
import * as Yup from 'yup';
import './MyForm.css';

function MyForm() {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({});

  const validationSchema = Yup.object({
    name: Yup.string().required('Name is required!'),
    email: Yup.string().email('Invalid email!').required('Email is required!'),
  });

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await validationSchema.validate(formData, { abortEarly: false });
      setErrors({});
      alert('Form is valid!');
    } catch (err) {
      const newErrors = {};
      err.inner.forEach((error) => {
        newErrors[error.path] = error.message;
      });
      setErrors(newErrors);
    }
  };

  return (
    <div className="form-container">
      <h1>Simple Form</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label className="label">Name:</label>
          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleChange}
            className="input"
          />
          {errors.name && <div className="error">{errors.name}</div>}
        </div>
        <div>
          <label className="label">Email:</label>
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
            className="input"
          />
          {errors.email && <div className="error">{errors.email}</div>}
        </div>
        <button type="submit" className="button">Submit</button>
      </form>
    </div>
  );
}

export default MyForm;

Conclusion

Yup est un outil puissant de validation de formulaire, même sans Formik. Avec seulement quelques lignes de code, vous pouvez ajouter une validation robuste à vos applications React.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!