Avec le package @formkit/zod, vous pouvez facilement activer la validation de vos formulaires FormKit avec votre schéma Zod. Cela offre un moyen pratique d'avoir des types isomorphes et de s'assurer que votre front-end et votre back-end utilisent les mêmes règles de validation.
Lors de la validation contre un schéma Zod, toutes les erreurs de validation seront mappées à leurs entrées correspondantes, affichées ou cachées en fonction de la propriété validation-visibility de votre formulaire / entrée, et empêcheront la soumission lorsque les données du formulaire ne passent pas la validation avec Zod.
Pour utiliser ce plugin avec FormKit, installez @formkit/zod :
yarn add @formkit/zod
Une fois que vous avez installé le package @formkit/zod, vous devrez enregistrer le plugin sur une base par formulaire et chaque formulaire qui nécessite une validation avec un schéma Zod créera une nouvelle instance du plugin en utilisant la fonction createZodPlugin.
Pour utiliser le plugin Zod, nous devons importer la fonction createZodPlugin de @formkit/zod, appeler la fonction createZodPlugin pour créer notre zodPlugin et submitHandler, puis les ajouter tous les deux à notre formulaire FormKit.
La fonction createZodPlugin prend deux arguments :
zodSchema : Le schéma Zod que vous souhaitez utiliser pour valider le formulaire.submitCallback : une fonction que vous souhaitez exécuter une fois la validation réussie sur votre formulaire — c'est là que vous géreriez l'envoi de vos données à votre backend ou d'autres tâches liées à la soumission. Vos données de formulaire seront fournies avec un support complet de TypeScript basé sur votre schéma Zod.La fonction createZodPlugin retournera un tuple de :
zodPlugin : Le plugin qui devrait être appliqué à la propriété plugins de votre formulaire cible.submitHandler : Le gestionnaire de soumission qui devrait être attaché à l'action @submit de votre formulaire. Lorsque les données du formulaire passent la validation de votre schéma Zod fourni, votre submitCallback se déclenchera.Voici un exemple d'utilisation d'un schéma Zod pour valider un formulaire FormKit. Il est important que les name de vos entrées FormKit correspondent aux valeurs attendues pour votre schéma Zod.
Maintenant, votre formulaire FormKit utilisera votre schéma Zod pour la validation — et tous les messages seront adjacents à chaque entrée FormKit tout comme la validation native de FormKit !
Utiliser Zod pour valider votre formulaire ne signifie pas que vous devez renoncer à utiliser les messages de validation intégrés de FormKit. Si vous ajoutez une validation FormKit à vos entrées FormKit, alors les erreurs de validation Zod ne s'afficheront que si toutes les validations FormKit ont été satisfaites et qu'il reste des validations Zod insatisfaites.
Cela présente quelques avantages :
confirm qui n'ont pas d'équivalents faciles à utiliser dans Zod.@formkit/i18n sans aucun effort supplémentaire de votre part.Voici le même formulaire qu'avant, mais maintenant en utilisant les messages de validation FormKit en plus de la validation du schéma Zod.
Si vous avez besoin de définir des erreurs sur votre formulaire, vous pouvez le faire avec la fonction node.setZodErrors qui est mise à disposition par le zodPlugin. La fonction node.setZodErrors accepte un objet ZodError et associera les erreurs à chaque entrée. Toutes les erreurs non correspondantes seront affichées comme des erreurs au niveau du formulaire.