Валідація Server Actions за допомогою Zod

"use server";

import { z } from "zod";

const requiredText = (emptyMessage: string, maxLength: number) =>
  z.preprocess(
    (value) => (typeof value === "string" ? value.trim() : ""),
    z
      .string()
      .min(1, emptyMessage)
      .max(maxLength, `Максимум ${maxLength} символів`)
  );

const contactSchema = z.object({
  name: requiredText("Введіть ім’я", 80),

  email: z.preprocess(
    (value) => (typeof value === "string" ? value.trim() : ""),
    z
      .string()
      .min(1, "Введіть електронну пошту")
      .email("Введіть коректну електронну пошту")
  ),

  message: requiredText("Введіть повідомлення", 1000),
});

type FieldErrors = {
  name?: string[];
  email?: string[];
  message?: string[];
};

export type FormState = {
  success: boolean;
  message: string;
  errors?: FieldErrors;
};

export const initialState: FormState = {
  success: false,
  message: "",
  errors: {},
};

export async function submitContact(
  previousState: FormState,
  formData: FormData
): Promise<FormState> {
  const rawData = {
    name: formData.get("name"),
    email: formData.get("email"),
    message: formData.get("message"),
  };

  const result = contactSchema.safeParse(rawData);

  if (!result.success) {
    const fieldErrors = result.error.flatten().fieldErrors;

    return {
      success: false,
      message: "Перевірте дані форми",
      errors: fieldErrors,
    };
  }

  const data = result.data;

  // Тут можна зберегти data в базу даних або надіслати повідомлення.
  console.log("Нове повідомлення:", data);

  return {
    success: true,
    message: "Повідомлення успішно надіслано",
    errors: {},
  };
}

const result = schema.safeParse(data);

const data = schema.parse(input);

const result = contactSchema.safeParse(rawData);

if (result.success) {
  // result.data містить перевірені дані
} else {
  // result.error містить інформацію про помилки
}

result.error.flatten().fieldErrors

{
  name: ["Введіть ім’я"],
  email: ["Введіть коректну електронну пошту"]
}

type FieldErrors = {
  name?: string[];
  email?: string[];
  message?: string[];
};

"use client";

import { useActionState } from "react";
import {
  initialState,
  submitContact,
} from "./actions";

export default function ContactForm() {
  const [state, formAction, isPending] = useActionState(
    submitContact,
    initialState
  );

  return (
    <form action={formAction}>
      <div>
        <label htmlFor="name">Ім’я</label>
        <input
          id="name"
          name="name"
          type="text"
          aria-invalid={Boolean(state.errors?.name)}
          disabled={isPending}
        />

        {state.errors?.name?.map((error) => (
          <p key={error} role="alert">
            {error}
          </p>
        ))}
      </div>

      <div>
        <label htmlFor="email">Електронна пошта</label>
        <input
          id="email"
          name="email"
          type="email"
          aria-invalid={Boolean(state.errors?.email)}
          disabled={isPending}
        />

        {state.errors?.email?.map((error) => (
          <p key={error} role="alert">
            {error}
          </p>
        ))}
      </div>

      <div>
        <label htmlFor="message">Повідомлення</label>
        <textarea
          id="message"
          name="message"
          rows={5}
          aria-invalid={Boolean(state.errors?.message)}
          disabled={isPending}
        />

        {state.errors?.message?.map((error) => (
          <p key={error} role="alert">
            {error}
          </p>
        ))}
      </div>

      <button type="submit" disabled={isPending}>
        {isPending ? "Надсилання..." : "Надіслати"}
      </button>

      {state.message && (
        <p role="status">
          {state.message}
        </p>
      )}
    </form>
  );
}

import ContactForm from "./ContactForm";

export default function ContactPage() {
  return (
    <main>
      <h1>Зворотний зв’язок</h1>
      <ContactForm />
    </main>
  );
}

const email = formData.get("email");

// Небезпечно покладатися лише на це припущення
sendEmail(email as string);

const rawData = {
  email: formData.get("email"),
};

const result = emailSchema.safeParse(rawData);

if (!result.success) {
  // Дані не пройшли перевірку
}

const validData = result.data;

export const contactSchema = z.object({
  name: requiredText("Введіть ім’я", 80),
  email: z.preprocess(
    (value) => (typeof value === "string" ? value.trim() : ""),
    z
      .string()
      .min(1, "Введіть електронну пошту")
      .email("Введіть коректну електронну пошту")
  ),
  message: requiredText("Введіть повідомлення", 1000),
});

import { z } from "zod";

const passwordSchema = z
  .object({
    password: z.string().min(8, "Пароль має містити щонайменше 8 символів"),
    passwordConfirmation: z.string(),
  })
  .refine(
    (data) => data.password === data.passwordConfirmation,
    {
      message: "Паролі не збігаються",
      path: ["passwordConfirmation"],
    }
  );

return {
  success: false,
  message: "Не вдалося зберегти повідомлення. Спробуйте ще раз.",
  errors: {},
};

const data = contactSchema.parse(rawData);

const email = formData.get("email");

// Не слід використовувати неперевірене значення

<input id="email" type="email" />

<input id="email" name="email" type="email" />