Leçon 14 / 20

Valider les données reçues

15 min Next.js — données, formulaires et cache Gratuit

Objectif : Refuser un avis incomplet ou invalide avant toute écriture en base.

Un formulaire peut être incomplet, modifié dans le navigateur ou envoyé par une requête construite manuellement. Le contrôle HTML required aide la personne qui utilise la page, mais ne suffit pas à protéger le traitement serveur. Vous allez donc vérifier les valeurs reçues par l’action avant de les considérer comme un avis exploitable.

Le formulaire de la fiche transmet déjà les champs randonneeId et texte à ajouterAvis. Comme rappelé dans la leçon sur le formulaire d’avis, ces valeurs arrivent dans un objet FormData ; vous devez contrôler leur type et leur contenu côté serveur, sans vous fier uniquement aux attributs HTML.

Définir les contrôles utiles

Un avis doit être associé à une randonnée et contenir un commentaire non vide. Vous vérifiez donc que chaque valeur reçue est bien une chaîne, puis vous retirez les espaces au début et à la fin du commentaire. Une valeur composée uniquement d’espaces devient vide après cette normalisation et doit être refusée.

Valider avant de poursuivre

Dans app/actions/avis.ts, remplacez le contenu actuel par l’action complète ci-dessous. Elle récupère les deux champs, rejette les valeurs absentes ou d’un type inattendu, puis refuse les commentaires vides après suppression des espaces périphériques. La limite de 1 000 caractères est contrôlée sur le texte normalisé afin d’éviter de traiter un commentaire excessivement long.

app/actions/avis.tsTypeScript
'use server';

export async function ajouterAvis(formData: FormData) {
  const randonneeId = formData.get('randonneeId');
  const texteRecu = formData.get('texte');

  if (typeof randonneeId !== 'string' || randonneeId.trim() === '') {
    return { ok: false, erreur: 'La randonnée est manquante.' };
  }

  if (typeof texteRecu !== 'string') {
    return { ok: false, erreur: 'Le commentaire est manquant.' };
  }

  const texte = texteRecu.trim();

  if (texte.length === 0) {
    return { ok: false, erreur: 'Le commentaire ne peut pas être vide.' };
  }

  if (texte.length > 1000) {
    return { ok: false, erreur: 'Le commentaire dépasse 1 000 caractères.' };
  }

  return { ok: true, randonneeId: randonneeId.trim(), texte };
}

La valeur renvoyée par l’action distingue explicitement un refus d’une validation réussie. À cette étape, le formulaire ne présente pas encore ces retours à l’écran et aucune donnée n’est enregistrée : un résultat ok: true signifie seulement que les valeurs ont passé les contrôles. L’écriture et son traitement seront ajoutés dans la leçon suivante.

Vérifier les cas limites

Vérifiez au minimum quatre cas : l’identifiant absent, le texte absent, un texte composé d’espaces et un texte normalisé qui dépasse la limite. Chacun doit produire un résultat ok: false. Un commentaire non vide de 1 000 caractères au maximum doit produire ok: true avec le texte débarrassé de ses espaces périphériques.

À retenir

  • Le contrôle côté navigateur ne remplace jamais la validation côté serveur.
  • Vérifiez le type et la présence de chaque champ reçu dans FormData.
  • Normalisez le commentaire avant de vérifier s’il est vide ou trop long.
  • Refusez les données invalides avant toute écriture en base.

Dans la prochaine leçon, vous ajouterez l’écriture de l’avis en base après le passage de ces contrôles.

Envie d'aller plus loin ?

Les cours Enovatic sont gratuits et le resteront. Si vous cherchez un accompagnement encadré, nos formations professionnelles sont animées par les mêmes formateurs.