Integrasikan React Hook Form dan Zod ke dalam Fungsi Email yang Ada

Mengintegrasikan React Hook Form dan Zod untuk Validasi Email

Frontend: Bereaksi dengan React Hook Form dan 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;

Menyiapkan Backend untuk Pengiriman Email

Backend: Node.js dengan 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');
});

Pertanyaan Umum tentang Mengintegrasikan React Hook Form dan Zod

1. Bagaimana cara mengintegrasikan React Hook Form dengan Zod?
2. Gunakan fungsi zodResolver dari paket @hookform/resolvers/zod untuk menghubungkan validasi Zod dengan React Hook Form.
3. Apa tujuan renderToStaticMarkup?
4. renderToStaticMarkup mengonversi komponen React menjadi string HTML statis, yang dapat digunakan untuk konten email atau kebutuhan HTML statis lainnya.
5. Bagaimana cara menangani pengiriman formulir dengan React Hook Form?
6. Gunakan fungsi handleSubmit dari React Hook Form untuk mengelola pengiriman formulir dan memvalidasi data sebelum memprosesnya.
7. Apa yang dilakukan nodemailer.createTransport?
8. nodemailer.createTransport membuat objek transport untuk mengirim email menggunakan layanan tertentu dan detail autentikasi.
9. Mengapa validasi sisi server penting?
10. Validasi sisi server memastikan bahwa data yang diterima oleh server valid, menjaga integritas data, dan melindungi dari input berbahaya.

Pemikiran Akhir tentang Validasi dan Pengiriman Formulir

Mengintegrasikan React Hook Form dan Zod untuk validasi formulir di aplikasi React Anda meningkatkan integritas data dan pengalaman pengguna. Dengan menggabungkan validasi sisi klien dan pemrosesan sisi server menggunakan Node.js dan Express, Anda menciptakan solusi tangguh untuk menangani pengiriman formulir. Pendekatan ini memastikan bahwa data divalidasi dengan benar dan diproses dengan aman, mengurangi kesalahan dan meningkatkan keandalan. Menerapkan praktik ini dapat meningkatkan fungsionalitas dan keamanan formulir web Anda secara signifikan.