Comment enregistrer la validation du formulaire à l'aide de zod et de React-hook-form comme dans ce tutoriel svelte ?

Question

J'ai essayé de suivre le tutoriel de vérification zod en svelte. Je n'ai aucune expérience avec cela (svelte), donc je me demande comment puis-je reproduire cette fonctionnalité de code dans une simple application React/next ? Je suis bloqué sur ce qui ({request}) sera/sera transmis à la fonction asynchrone.

De plus, cela devrait-il être fait dans useEffect ou uniquement appelé lors de la soumission du formulaire ?

export const actions = {
default: async ({ request }) => {
    const formData = Object.fromEntries(await request.formData());
    console.log('Form Data:', formData);

    try {
        const result = registerSchema.parse(formData);
        console.log('SUCCESS');
        console.log(result);
    } catch (err) {
        const { fieldErrors: errors } = err.flatten();
        const { password, passwordConfirm, ...rest } = formData;
        return {
            data: rest,
            errors
        };
    }
};

Voici le référentiel de ce tutoriel : https://github.com/huntabyte/sveltekit-form-validation/blob/main/src/routes/%2Bpage.server.js

Answer 1

Voici ce que j'ai fait :

1. Tout d'abord, j'ai défini le schéma de validation en utilisant zod.
2. J'ai ensuite créé un hook personnalisé pour gérer la soumission et la validation du formulaire. Dans ce hook, j'ai utilisé le hook useForm de réagir-hook-form pour gérer l'état du formulaire.
3. Pour gérer la soumission du formulaire, je transmets la fonction handleSubmit de useForm à mon hook personnalisé.
4. Dans la fonction handleSubmit, j'ai utilisé la méthode parse dans l'architecture de validation zod pour valider les données du formulaire.
5. Si la validation réussit, j'enregistre les données du formulaire dans la console. Sinon, je renvoie un objet contenant les données du formulaire et les éventuelles erreurs de validation.

Dans l’ensemble, je trouve que cette approche fonctionne bien et est facile à comprendre et à mettre en œuvre. Quant à votre question sur l'endroit où placer le code de validation, je suggérerais de l'appeler lors de la soumission du formulaire plutôt que de l'appeler dans useEffect.