Moteur de Validation avec useFormState de React : Une Plongée en Profondeur dans la Validation de Formulaires Multi-étapes

Dans le monde du développement web moderne, créer des expériences utilisateur intuitives et robustes est primordial. Nulle part ailleurs cela n'est plus critique que dans les formulaires, la principale passerelle d'interaction avec l'utilisateur. Alors que les formulaires de contact simples sont directs, la complexité monte en flèche avec les formulaires multi-étapes — pensez aux assistants d'inscription d'utilisateurs, aux processus de paiement e-commerce ou aux panneaux de configuration détaillés. Ces processus en plusieurs étapes présentent des défis importants en matière de gestion d'état, de validation et de maintien d'un flux utilisateur fluide. Historiquement, les développeurs ont jonglé avec des états complexes côté client, des fournisseurs de contexte et des bibliothèques tierces pour maîtriser cette complexité.

Voici le hook `useFormState` de React. Introduit dans le cadre de l'évolution de React vers des composants intégrés au serveur, ce puissant hook offre une solution simplifiée et élégante pour gérer l'état et la validation des formulaires, en particulier dans le contexte des formulaires multi-étapes. En s'intégrant directement avec les Actions Serveur, `useFormState` crée un moteur de validation robuste qui simplifie le code, améliore les performances et prône l'amélioration progressive. Cet article fournit un guide complet pour les développeurs du monde entier sur la façon d'architecturer un moteur de validation multi-étapes sophistiqué en utilisant `useFormState`, transformant une tâche complexe en un processus gérable et évolutif.

Le Défi Persistant des Formulaires Multi-étapes

Avant de plonger dans la solution, il est crucial de comprendre les points de douleur courants auxquels les développeurs sont confrontés avec les formulaires multi-étapes. Ces défis ne sont pas triviaux et peuvent avoir un impact sur tout, du temps de développement à l'expérience de l'utilisateur final.

• Complexité de la Gestion d'État : Comment persister les données lorsqu'un utilisateur navigue entre les étapes ? L'état doit-il résider dans un composant parent, un contexte global ou le stockage local ? Chaque approche a ses compromis, menant souvent au 'prop-drilling' ou à une logique de synchronisation d'état complexe.
• Fragmentation de la Logique de Validation : Où la validation doit-elle avoir lieu ? Valider tout à la fin offre une mauvaise expérience utilisateur. Valider à chaque étape est mieux, mais cela nécessite souvent d'écrire une logique de validation fragmentée, à la fois côté client (pour un retour instantané) et côté serveur (pour la sécurité et l'intégrité des données).
• Obstacles à l'Expérience Utilisateur : Un utilisateur s'attend à pouvoir naviguer entre les étapes sans perdre ses données. Il s'attend également à des messages d'erreur clairs et contextuels et à un retour immédiat. La mise en œuvre de cette expérience fluide peut impliquer une quantité importante de code répétitif.
• Synchronisation de l'État Serveur-Client : La source de vérité ultime est généralement le serveur. Maintenir l'état côté client parfaitement synchronisé avec les règles de validation et la logique métier côté serveur est une bataille constante, conduisant souvent à du code dupliqué et à des incohérences potentielles.

Ces défis soulignent la nécessité d'une approche plus intégrée et cohésive — une qui comble le fossé entre le client et le serveur. C'est précisément là que `useFormState` brille.

Voici `useFormState` : Une Approche Moderne de la Gestion des Formulaires

Le hook `useFormState` est conçu pour gérer l'état d'un formulaire qui se met à jour en fonction du résultat d'une action de formulaire. C'est une pierre angulaire de la vision de React pour des applications à amélioration progressive qui fonctionnent de manière transparente avec ou sans JavaScript activé côté client.

Qu'est-ce que `useFormState` ?

À la base, `useFormState` est un Hook React qui prend deux arguments : une fonction d'action serveur et un état initial. Il renvoie un tableau contenant deux valeurs : l'état actuel du formulaire et une nouvelle fonction d'action à passer à votre élément `

`.

const [state, formAction] = useFormState(myServerAction, initialState);

Chaque fois que le formulaire est soumis, React appelle `myServerAction` avec l'état précédent et les données du formulaire. Ce que `myServerAction` retourne devient le nouvel `state`. Ce modèle simple mais puissant permet au serveur de dicter l'état du formulaire, y compris les erreurs de validation, les messages de succès ou toute autre information pertinente.

La Puissance de l'Intégration avec les Actions Serveur

Les Actions Serveur sont des fonctions qui peuvent être définies sur le serveur mais appelées depuis le client, estompant les frontières entre le code côté client et côté serveur de manière sécurisée et efficace. Combinées avec `useFormState`, elles créent une boucle fermée :

1. L'utilisateur remplit un formulaire et le soumet.
2. La `formAction` fournie par `useFormState` est invoquée, ce qui appelle l'action serveur.
3. L'action serveur reçoit les données du formulaire, effectue la validation et la logique métier.
4. L'action serveur renvoie un nouvel objet d'état (par ex., `{ errors: { email: 'Format d\'email invalide' } }`).
5. Le hook `useFormState` met à jour son `state` avec l'objet retourné, déclenchant un nouveau rendu.
6. L'interface utilisateur se met à jour pour afficher les erreurs de validation ou le message de succès directement depuis la réponse du serveur.

Cette approche centralise la logique de validation sur le serveur, garantissant l'intégrité des données et réduisant la complexité du code côté client. Elle fonctionne également parfaitement avec l'amélioration progressive ; si JavaScript ne se charge pas, la soumission du formulaire fonctionne toujours comme une publication de formulaire HTML standard.

Construire un Moteur de Validation Multi-étapes : Un Guide Pratique

Construisons un exemple pratique pour démontrer la puissance de `useFormState` en tant que moteur de validation multi-étapes. Notre objectif est de créer un formulaire d'intégration utilisateur en trois étapes qui soit robuste, convivial et facile à maintenir.

Le Scénario : Un Formulaire d'Intégration Utilisateur en Trois Étapes

• Étape 1 : Informations Personnelles - Collecte le nom et l'adresse e-mail de l'utilisateur.
• Étape 2 : Détails de l'Entreprise - Collecte le nom de l'entreprise et le rôle de l'utilisateur.
• Étape 3 : Confirmation Finale - Affiche toutes les informations collectées pour examen avant la soumission finale.

Mise en Place du Projet et État Initial

D'abord, définissons l'état initial de notre formulaire et la structure de notre action serveur. Nous gérerons l'état entier du formulaire dans un seul objet, y compris l'étape actuellement active.

Dans un fichier comme `actions.js` (marqué avec `'use server'`) :

// actions.js
'use server';

import { z } from 'zod'; // Une bibliothèque de validation populaire

const schema = z.object({
name: z.string().min(2, 'Le nom doit comporter au moins 2 caractères.'),
email: z.string().email('Adresse e-mail invalide.'),
companyName: z.string().min(3, 'Le nom de l\'entreprise est requis.'),
role: z.string().min(2, 'Le rôle est requis.'),
});

export async function onbordingAction(prevState, formData) {
const step = Number(formData.get('_step'));
const name = formData.get('name');
const email = formData.get('email');
const companyName = formData.get('companyName');
const role = formData.get('role');

const currentState = {
name, email, companyName, role,
};

// La logique pour chaque étape ira ici...
return {
...prevState,
...currentState,
message: 'Message d\'état par défaut'
};
}

Et notre composant principal gérera l'étape actuelle :

// OnboardingForm.jsx
'use client';

import { useFormState } from 'react-dom';
import { onbordingAction } from './actions';

const initialState = {
message: null,
errors: {},
step: 1,
};

export default function OnboardingForm() {
const [state, formAction] = useFormState(onbordingAction, initialState);

return (

{state.step === 1 && }
{state.step === 2 && }
{state.step === 3 && }

);
}

Étape 1 : Saisie et Validation des Informations Personnelles

Dans cette étape, nous voulons seulement valider les champs `name` et `email`. Nous utiliserons un champ caché `_step` pour indiquer à notre action serveur quelle logique de validation exécuter.

// Composant Step1.jsx
export function Step1({ state }) {
return (

);
}

Maintenant, mettons à jour notre action serveur pour gérer la validation de l'Étape 1.

// actions.js (mis à jour)
// ... (imports et définition du schéma)

export async function onbordingAction(prevState, formData) {
// ... (récupération des données du formulaire)
const step = Number(formData.get('_step'));

if (step === 1) {
const validatedFields = schema.pick({ name: true, email: true }).safeParse({ name, email });

if (!validatedFields.success) {
return {
...currentState,
step: 1,
errors: validatedFields.error.flatten().fieldErrors,
};
}

// Succès, passer à l'étape suivante
return {
...currentState,
step: 2,
errors: {},
};
}
// ... (logique pour les autres étapes)
}

Lorsque l'utilisateur clique sur "Suivant", le formulaire est soumis. L'action serveur vérifie que c'est l'Étape 1, valide uniquement les champs `name` et `email` en utilisant la méthode `pick` de Zod, et renvoie un nouvel état. Si la validation échoue, elle renvoie les erreurs et reste à l'Étape 1. Si elle réussit, elle efface les erreurs et met à jour le `step` à 2, ce qui amène notre composant principal `OnboardingForm` à rendre le composant `Step2`.

Étape 2 : Validation Progressive pour les Détails de l'Entreprise

La beauté de cette approche est que l'état de l'Étape 1 est automatiquement reporté. Nous avons juste besoin de le rendre dans des champs cachés pour qu'il soit inclus dans la soumission suivante du formulaire.

// Composant Step2.jsx
export function Step2({ state }) {
return (

);
}

Et nous mettons à jour l'action serveur pour gérer l'Étape 2.

// actions.js (mis à jour)
// ...
if (step === 2) {
const validatedFields = schema.pick({ companyName: true, role: true }).safeParse({ companyName, role });

if (!validatedFields.success) {
return {
...currentState,
step: 2,
errors: validatedFields.error.flatten().fieldErrors,
};
}

// Succès, passer à la révision finale
return {
...currentState,
step: 3,
errors: {},
};
}
// ...

La logique est identique à celle de l'Étape 1, mais elle cible les champs de l'Étape 2. Le hook `useFormState` gère de manière transparente la transition, préservant toutes les données et offrant un flux de validation propre et progressif.

Étape 3 : La Révision Finale et la Soumission

Dans la dernière étape, nous affichons toutes les données collectées pour que l'utilisateur les examine. La soumission finale déclenchera une validation complète de tous les champs avant que nous n'enregistrions les données dans une base de données.

// Composant Step3.jsx
export function Step3({ state }) {
return (

);
}

La logique finale de l'action serveur effectue une validation complète et la logique métier finale.

// actions.js (version finale)
// ...
if (step === 3) {
// Validation finale et complète
const validatedFields = schema.safeParse({ name, email, companyName, role });

if (!validatedFields.success) {
// Ne devrait pas arriver si la validation étape par étape est correcte, mais c'est une bonne protection
return {
...currentState,
step: 1, // Renvoyer l'utilisateur à la première étape avec les erreurs
errors: validatedFields.error.flatten().fieldErrors,
message: 'Erreur : Des données invalides ont été trouvées. Veuillez vérifier.'
};
}

try {
// console.log('Soumission à la base de données :', validatedFields.data);
// await saveToDatabase(validatedFields.data);
return { message: 'Succès ! Votre intégration est terminée.', step: 4 }; // Une dernière étape de succès
} catch (dbError) {
return { ...currentState, step: 3, message: 'Erreur : Impossible d\'enregistrer les données.' };
}
}
// ...

Avec cela, nous avons un formulaire multi-étapes complet et robuste avec une validation progressive et faisant autorité côté serveur, le tout orchestré proprement par le hook `useFormState`.

Stratégies Avancées pour une Expérience Utilisateur de Classe Mondiale

Construire un formulaire fonctionnel est une chose ; le rendre agréable à utiliser en est une autre. Voici quelques techniques avancées pour sublimer vos formulaires multi-étapes.

Gérer la Navigation : Aller et Venir

Notre logique actuelle ne permet que d'avancer. Pour permettre aux utilisateurs de revenir en arrière, nous ne pouvons pas utiliser un simple bouton `type="submit"`. À la place, nous pourrions gérer l'étape dans l'état du composant côté client et n'utiliser l'action de formulaire que pour la progression. Cependant, une approche plus simple qui reste fidèle au modèle centré sur le serveur consiste à avoir un bouton "Précédent" qui soumet également le formulaire mais avec une intention différente.

// Dans un composant d'étape...
Précédent
Suivant

// Dans l'action serveur...
const intent = formData.get('intent');
if (intent === 'back') {
return { ...currentState, step: step - 1, errors: {} };
}

Fournir un Retour Instantané avec `useFormStatus`

Le hook `useFormStatus` fournit l'état d'attente d'une soumission de formulaire au sein du même `

`. C'est parfait pour désactiver les boutons et afficher des indicateurs de chargement, ce qui est crucial pour une bonne UX, en particulier sur les connexions réseau plus lentes.

// SubmitButton.jsx
'use client';

import { useFormStatus } from 'react-dom';

export function SubmitButton({ text }) {
const { pending } = useFormStatus();

return (

{pending ? 'Envoi en cours...' : text}

);
}

Vous pouvez ensuite utiliser `` dans vos composants d'étape au lieu d'un `` standard.

Structurer Votre Action Serveur pour l'Évolutivité

À mesure que votre formulaire s'agrandit, la chaîne `if/else if` dans l'action serveur peut devenir difficile à gérer. Une instruction `switch` ou un modèle plus modulaire est recommandé pour une meilleure organisation.

// actions.js avec une instruction switch
switch (step) {
case 1:
// Gérer la validation de l'Étape 1
break;
case 2:
// Gérer la validation de l'Étape 2
break;
// ... etc
}

L'Accessibilité (a11y) n'est pas Négociable

Pour un public mondial, l'accessibilité est un must. Assurez-vous que vos formulaires sont accessibles en :

• Utilisant `aria-invalid="true"` sur les champs de saisie avec des erreurs.
• Connectant les messages d'erreur aux entrées en utilisant `aria-describedby`.
• Gérant le focus de manière appropriée après une soumission, surtout lorsque des erreurs apparaissent.
• S'assurant que tous les contrôles de formulaire sont navigables au clavier.

Une Perspective Globale : Internationalisation et `useFormState`

L'un des avantages significatifs de la validation pilotée par le serveur est la facilité de l'internationalisation (i18n). Les messages de validation n'ont plus besoin d'être codés en dur côté client. L'action serveur peut détecter la langue préférée de l'utilisateur (à partir d'en-têtes comme `Accept-Language`, d'un paramètre d'URL ou d'un paramètre de profil utilisateur) et retourner les erreurs dans sa langue maternelle.

Par exemple, en utilisant une bibliothèque comme `i18next` sur le serveur :

// Action serveur avec i18n
import { i18n } from 'your-i18n-config';
// ...
const t = await i18n.getFixedT(userLocale); // ex., 'es' pour l'espagnol

const schema = z.object({
email: z.string().email(t('errors.invalid_email')),
});

Cette approche garantit que les utilisateurs du monde entier reçoivent des retours clairs et compréhensibles, améliorant considérablement l'inclusivité et la convivialité de votre application.

`useFormState` vs. Bibliothèques Côté Client : Un Regard Comparatif

Comment ce modèle se compare-t-il aux bibliothèques établies comme Formik ou React Hook Form ? Il ne s'agit pas de savoir laquelle est la meilleure, mais laquelle est la bonne pour la tâche.

• Bibliothèques Côté Client (Formik, React Hook Form) : Elles sont excellentes pour les formulaires complexes et très interactifs où un retour instantané côté client est la priorité absolue. Elles fournissent des boîtes à outils complètes pour gérer l'état, la validation et la soumission du formulaire entièrement dans le navigateur. Leur principal défi peut être la duplication de la logique de validation entre le client et le serveur.
• `useFormState` avec les Actions Serveur : Cette approche excelle là où le serveur est la source de vérité ultime. Elle simplifie l'architecture globale en centralisant la logique, garantit l'intégrité des données et fonctionne de manière transparente avec l'amélioration progressive. Le compromis est un aller-retour réseau pour la validation, bien qu'avec les infrastructures modernes, cela soit souvent négligeable.

Pour les formulaires multi-étapes qui impliquent une logique métier importante ou des données qui doivent être validées par rapport à une base de données (par ex., vérifier si un nom d'utilisateur est déjà pris), le modèle `useFormState` offre une architecture plus directe et moins sujette aux erreurs.

Conclusion : L'Avenir des Formulaires dans React

Le hook `useFormState` est plus qu'une nouvelle API ; il représente un changement philosophique dans la façon dont nous construisons des formulaires en React. En adoptant un modèle centré sur le serveur, nous pouvons créer des formulaires multi-étapes plus robustes, sécurisés, accessibles et plus faciles à maintenir. Ce modèle élimine des catégories entières de bogues liés à la synchronisation d'état et fournit une structure claire et évolutive pour gérer des flux utilisateur complexes.

En construisant un moteur de validation avec `useFormState`, vous ne gérez pas seulement l'état ; vous architecturez un processus de collecte de données résilient et convivial qui repose sur les principes du développement web moderne. Pour les développeurs qui créent des applications pour un public mondial diversifié, ce puissant hook fournit la base pour créer des expériences utilisateur véritablement de classe mondiale.