Formulaires avec validation

Vue d’ensembleLien vers la section

Les formes sont l’une des parties les plus fragiles d’un produit SaaS.

Ils combinent l'entrée utilisateur, les règles de validation, la soumission asynchrone, l'accessibilité, les états de chargement et la gestion des erreurs. Un bon modèle de forme rend ces responsabilités explicites au lieu de les cacher dans une abstraction opaque.

Ce guide montre comment construire des formulaires prévisibles en utilisant :

• React Hook Form pour le form state
• Zod pour la validation du schéma
• PyColors UI pour les primitives d'interface accessibles

Ce que vous allez construireLien vers la section

Modèle mentalLien vers la section

Etat d'affichage des entrées. Les schémas définissent la vérité. Les formes coordonnent le flux.

Séparez ces responsabilités :

ÉtapesLien vers la section

import { z } from "zod";

export const accountFormSchema = z.object({
  email: z.string().email("Enter a valid email address"),
  password: z.string().min(8, "Password must contain at least 8 characters"),
});

export type AccountFormValues = z.infer<typeof accountFormSchema>;

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";

import {
  accountFormSchema,
  type AccountFormValues,
} from "@/lib/forms/account-schema";

const form = useForm<AccountFormValues>({
  resolver: zodResolver(accountFormSchema),
  defaultValues: {
    email: "",
    password: "",
  },
});

<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
  <Input
    label="Email"
    type="email"
    autoComplete="email"
    {...form.register("email")}
    error={form.formState.errors.email?.message}
  />

  <Input
    label="Password"
    type="password"
    autoComplete="current-password"
    {...form.register("password")}
    error={form.formState.errors.password?.message}
  />

  <Button type="submit" disabled={form.formState.isSubmitting}>
    {form.formState.isSubmitting ? "Saving…" : "Save changes"}
  </Button>
</form>

{
  formError ? (
    <Alert variant="destructive">
      <AlertTitle>Submission failed</AlertTitle>
      <AlertDescription>{formError}</AlertDescription>
    </Alert>
  ) : null;
}

Exemple completLien vers la section

Guide de décisionLien vers la section

Utilisez ce modèle si :

• le formulaire a des règles de validation réelles
• le formulaire envoie les données de manière asynchrone
• Les utilisateurs ont besoin d’un retour clair sur le terrain
• les erreurs doivent être accessibles et explicites
• le même motif apparaîtra sur les surfaces du produit

Évitez de trop abstraire si :

• La forme change encore fréquemment
• La logique de validation est cachée dans les composants de l'interface utilisateur
• un seul composant de formulaire nécessite de nombreux accessoires conditionnels
• l'abstraction rend le débogage plus difficile
• L’accessibilité devient implicite

Liste de contrôle de productionLien vers la section

Avant d'expédier un formulaire, confirmez que :

• chaque champ a une étiquette visible
• Les messages de validation sont courts et spécifiques
• Les erreurs de champ sont affichées à proximité du champ
• submit est désactivé pendant que la demande est en cours d'exécution
• Les erreurs async sont visibles dans le formulaire, pas seulement dans un toast
• la navigation du clavier fonctionne du début à la soumission
• La validation côté serveur reflète le contrat client

Questions courantesLien vers la section

Prochaines étapesLien vers la section