Intégrez React Hook Form et Zod dans la fonction de messagerie existante

Intégration de React Hook Form et Zod pour la validation des e-mails

Frontend : Réagissez avec React Hook Form et Zod

import React from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
const schema = z.object({
  fullName: z.string().min(1, "Full Name is required"),
  senderEmail: z.string().email("Invalid email address"),
  phone: z.string().min(10, "Phone number is too short"),
  message: z.string().min(1, "Message is required"),
});
const ContactForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(schema)
  });
  const onSubmit = async (data) => {
    const finalHtml = renderToStaticMarkup(
      <ContactFormEmail message={data.message} senderEmail={data.senderEmail} />
    );
    const finalText = renderToStaticMarkup(
      <ContactFormEmail message={data.message} senderEmail={data.senderEmail} />
    );
    try {
      const res = await fetch('/api/sendEmail.json', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          from: 'john@doe.com',
          to: 'john@doe.com',
          subject: 'New message from contact form',
          reply_to: data.senderEmail,
          html: finalHtml,
          text: finalText
        })
      });
    } catch (error) {
      setError('root', { message: error.response.data.message });
    }
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('fullName')} placeholder="Full Name" />
      {errors.fullName && <p>{errors.fullName.message}</p>}
      <input {...register('senderEmail')} placeholder="Email" />
      {errors.senderEmail && <p>{errors.senderEmail.message}</p>}
      <input {...register('phone')} placeholder="Phone" />
      {errors.phone && <p>{errors.phone.message}</p>}
      <textarea {...register('message')} placeholder="Message" />
      {errors.message && <p>{errors.message.message}</p>}
      <button type="submit">Send</button>
    </form>
  );
};
export default ContactForm;

Configuration du backend pour l'envoi d'e-mails

Backend : Node.js avec Express

const express = require('express');
const nodemailer = require('nodemailer');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
const transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: 'your-email@gmail.com',
    pass: 'your-password'
  }
});
app.post('/api/sendEmail.json', (req, res) => {
  const { from, to, subject, reply_to, html, text } = req.body;
  const mailOptions = {
    from, to, subject, replyTo: reply_to, html, text
  };
  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      return res.status(500).send({ message: error.message });
    }
    res.status(200).send({ message: 'Email sent successfully' });
  });
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Foire aux questions sur l'intégration de React Hook Form et Zod

1. Comment intégrer React Hook Form avec Zod ?
2. Utilisez la fonction zodResolver du package @hookform/resolvers/zod pour connecter la validation Zod à React Hook Form.
3. Quel est le but de renderToStaticMarkup ?
4. renderToStaticMarkup convertit les composants React en chaînes HTML statiques, qui peuvent être utilisées pour le contenu des e-mails ou d'autres besoins HTML statiques.
5. Comment puis-je gérer la soumission de formulaire avec React Hook Form ?
6. Utilisez la fonction handleSubmit de React Hook Form pour gérer les soumissions de formulaires et valider les données avant de les traiter.
7. Que fait nodemailer.createTransport ?
8. nodemailer.createTransport crée un objet de transport pour envoyer des e-mails à l'aide d'un service spécifié et de détails d'authentification.
9. Pourquoi la validation côté serveur est-elle importante ?
10. La validation côté serveur garantit que les données reçues par le serveur sont valides, en maintenant l'intégrité des données et en les protégeant contre les entrées malveillantes.

Réflexions finales sur la validation et la soumission du formulaire

L'intégration de React Hook Form et Zod pour la validation des formulaires dans vos applications React améliore l'intégrité des données et l'expérience utilisateur. En combinant la validation côté client avec le traitement côté serveur à l'aide de Node.js et Express, vous créez une solution robuste pour gérer les soumissions de formulaires. Cette approche garantit que les données sont correctement validées et traitées en toute sécurité, réduisant ainsi les erreurs et améliorant la fiabilité. La mise en œuvre de ces pratiques peut améliorer considérablement la fonctionnalité et la sécurité de vos formulaires Web.