Validation des formulaires

La validation des formulaires est un aspect crucial de toute application qui nécessite des entrées de l’utilisateur. Elle garantit que les données entrées par l’utilisateur sont valides et cohérentes avant qu’elles ne soient traitées ou stockées.

En React, la validation des formulaires peut être réalisée de plusieurs façons. L’une des approches les plus courantes consiste à utiliser l’état local pour stocker les valeurs des champs de formulaire et à effectuer la validation lorsque le formulaire est soumis.

Exemple de validation des formulaires en React

Voici un exemple de base de la façon dont la validation des formulaires peut être réalisée en React :

import React, { useState } from 'react';
 
function Form() {
 const [inputValue, setInputValue] = useState('');
 const [errorMessage, setErrorMessage] = useState('');
 
 const handleChange = event => {
 setInputValue(event.target.value);
 };
 
 const handleSubmit = event => {
 event.preventDefault();
 if (!inputValue) {
 setErrorMessage('Please enter a value');
 } else {
 alert(`Submitted: ${inputValue}`);
 setErrorMessage('');
 }
 };
 
 return (
 <form onSubmit={handleSubmit}>
  <label>
    Name:
    <input type="text" value={inputValue} onChange={handleChange} />
  </label>
  {errorMessage && <p>{errorMessage}</p>}
  <input type="submit" value="Submit" />
 </form>
 );
}

Dans cet exemple, nous avons ajouté une autre variable d’état errorMessage pour stocker le message d’erreur. Lorsque le formulaire est soumis, nous vérifions si inputValue est vide. Si c’est le cas, nous définissons errorMessage sur ‘Please enter a value’, sinon nous affichons une alerte avec la valeur actuelle de inputValue et réinitialisons errorMessage.

Considérations pour des validations plus complexes

Notez que cette approche de la validation des formulaires est assez basique et peut ne pas convenir à tous les cas d’utilisation. Pour des validations plus complexes, vous pouvez envisager d’utiliser des bibliothèques tierces comme Formik ou react-hook-form.