Afficher les erreurs Zod Refine avec React-Hook-Form

Introduction

Dans cette vidéo, nous abordons une problématique courante pour les développeurs qui utilisent React Hook Form en combinaison avec des résolveurs tels que Zod ou Yup : l'affichage des erreurs de validation dans l'état du formulaire.
Si vous vous êtes déjà arraché les cheveux sur ce sujet, cette vidéo est faite pour vous.

Contenu

Présentation du problème

• Difficulté à afficher les erreurs de validation :
  Les erreurs définies dans formState ne s'affichent parfois pas correctement, en particulier avec des règles complexes créées via Zod.
• Bug dans React Hook Form :
  Même si les erreurs sont présentes dans le code, elles ne sont pas toujours visibles sur l'écran.

Solution avec Zod et ses Refine

1. Création de règles personnalisées avec Zod :
   • Validation d'une URL YouTube pour le champ videoURL.
   • Interdiction des URLs dans le champ message.
2. Retour des erreurs claires :
   • Clé d'erreur pour videoURL : must be valid YouTube.
   • Clé d'erreur pour message : no URL in message.

const schema = z.object({
  videoURL: z.string().refine((val) => isYouTubeURL(val), {
    message: "must be valid YouTube",
  }),
  message: z.string().refine((val) => !containsURL(val), {
    message: "no URL in message",
  }),
});