Validation de base des formulaires

Pourquoi valider : la première ligne de défense

Laisser les utilisateurs soumettre n'importe quelle donnée via un formulaire est une recette pour les problèmes. Des données incorrectes ou incomplètes peuvent entraîner des erreurs côté serveur, corrompre votre base de données et, surtout, frustrer vos utilisateurs. La validation des formulaires côté client est la première étape essentielle pour garantir la qualité des données soumises et offrir une meilleure expérience utilisateur.

L'objectif principal de la validation côté client n'est pas la sécurité (car elle peut être contournée), mais plutôt de fournir un retour **immédiat** à l'utilisateur s'il fait une erreur de saisie. Indiquer qu'un champ est obligatoire avant même la soumission, ou signaler qu'une adresse e-mail n'a pas le bon format, guide l'utilisateur et réduit les allers-retours inutiles avec le serveur.

Dans React, en particulier avec les composants contrôlés, nous avons un contrôle total sur les données au fur et à mesure qu'elles sont saisies, ce qui rend l'implémentation de la validation de base relativement simple et intégrée au flux de gestion d'état.

Intégrer la logique de validation : onChange et onSubmit

Où placer la logique de validation ? Deux moments clés se présentent :

1. **Dans `onChange` :** Permet une validation et un retour d'information *en temps réel*, à chaque modification de l'input. C'est idéal pour des règles simples comme la longueur maximale ou le formatage.

2. **Dans `onSubmit` :** Sert de validation *finale* avant de tenter d'envoyer les données. C'est le moment de vérifier toutes les règles, notamment les champs obligatoires, et d'empêcher la soumission si des erreurs persistent.

Souvent, une combinaison des deux est utilisée : validation légère dans `onChange` pour le retour immédiat, et validation complète dans `onSubmit` comme filet de sécurité.

La logique de validation elle-même repose sur du JavaScript standard : vérifier si une chaîne est vide (`value.trim() === ''`), contrôler sa longueur (`value.length`), utiliser des expressions régulières (`regex.test(value)`) pour des formats simples (comme un e-mail basique), ou comparer des valeurs numériques.

Gérer l'état des erreurs et afficher les messages

Pour afficher des messages d'erreur pertinents, nous devons savoir *quelles* erreurs se sont produites et pour *quels* champs. Une approche courante consiste à utiliser `useState` pour gérer un objet d'erreurs, où les clés correspondent aux noms des champs et les valeurs aux messages d'erreur.

import React, { useState } from 'react';

function RegistrationForm() {
  const [formData, setFormData] = useState({ username: '', email: '', password: '' });
  // Etat pour stocker les messages d'erreur
  const [errors, setErrors] = useState({});

  const validateField = (name, value) => {
    let fieldErrors = { ...errors };
    switch (name) {
      case 'username':
        if (!value.trim()) {
          fieldErrors.username = 'Le nom d\'utilisateur est requis.';
        } else if (value.length < 3) {
          fieldErrors.username = 'Le nom d\'utilisateur doit faire au moins 3 caractères.';
        } else {
          delete fieldErrors.username; // Supprimer l'erreur si valide
        }
        break;
      case 'email':
        // Validation TRES basique d'email
        if (!value.trim()) {
          fieldErrors.email = 'L\'email est requis.';
        } else if (!/\S+@\S+\.\S+/.test(value)) {
          fieldErrors.email = 'L\'adresse email est invalide.';
        } else {
          delete fieldErrors.email;
        }
        break;
      case 'password':
        if (!value) {
          fieldErrors.password = 'Le mot de passe est requis.';
        } else if (value.length < 6) {
          fieldErrors.password = 'Le mot de passe doit faire au moins 6 caractères.';
        } else {
          delete fieldErrors.password;
        }
        break;
      default:
        break;
    }
    setErrors(fieldErrors);
  };

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData(prevData => ({ ...prevData, [name]: value }));
    // Valider le champ à chaque changement
    validateField(name, value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // Valider tous les champs une dernière fois avant soumission
    validateField('username', formData.username);
    validateField('email', formData.email);
    validateField('password', formData.password);

    // Vérifier s'il reste des erreurs après la validation finale
    if (Object.keys(errors).length === 0 && formData.username && formData.email && formData.password) {
      console.log('Formulaire valide, soumission :', formData);
      alert('Inscription réussie ! (simulation)');
      // Logique de soumission API...
    } else {
      console.log('Formulaire invalide, erreurs :', errors);
      alert('Veuillez corriger les erreurs dans le formulaire.');
    }
  };

  return (
    

      

        Nom d'utilisateur:
        
        {/* Affichage conditionnel du message d'erreur */} 
        {errors.username && 
{errors.username}
}
      

      

        Email:
        
        {errors.email && 
{errors.email}
}
      

      

        Mot de passe:
        
        {errors.password && 
{errors.password}
}
      

      S'inscrire
    
  );
}

export default RegistrationForm;

/* CSS (exemple simple) */
/* 
.input-error {
  border-color: red;
}
*/

Ce code montre comment :

• Maintenir un état `errors`.
• Créer une fonction `validateField` réutilisable.
• Appeler la validation dans `handleChange` (retour immédiat).
• Afficher conditionnellement les messages d'erreur sous chaque champ.
• Optionnellement, appliquer un style CSS aux champs invalides.
• Effectuer une validation finale dans `handleSubmit` et vérifier l'objet `errors` avant de soumettre.

Limitations et importance de la validation serveur

Il est crucial de comprendre que la validation côté client est une aide pour l'utilisateur, pas une mesure de sécurité infaillible. Un utilisateur mal intentionné peut facilement contourner le JavaScript et envoyer des requêtes directement à votre serveur avec des données invalides.

Par conséquent, **la validation côté serveur est absolument indispensable**. Le serveur doit toujours re-valider toutes les données reçues avant de les traiter ou de les enregistrer, en appliquant les mêmes règles (et potentiellement des règles plus strictes, comme vérifier l'unicité d'un nom d'utilisateur).

La validation de base côté client présentée ici est un excellent point de départ pour améliorer l'UX. Pour des besoins de validation plus complexes (conditions dépendantes entre champs, règles asynchrones, internationalisation des messages d'erreur), l'utilisation de bibliothèques dédiées comme React Hook Form ou Formik (abordées plus loin) devient rapidement avantageuse.