Формы и валидация в React

import { useState } from "react";

const MAX = 200;

/* controlled: the value lives in state because the UI depends on it */
export function CommentField() {
  const [comment, setComment] = useState("");
  const left = MAX - comment.length;

  return (
    <div>
      <label htmlFor="comment">Comment</label>
      <textarea
        id="comment"
        name="comment"
        value={comment}
        onChange={(e) => setComment(e.target.value)}
        maxLength={MAX}
      />
      <p>{left} characters left</p>
    </div>
  );
}

import type { FormEvent } from "react";

type Props = { onSend: (data: Record<string, FormDataEntryValue>) => void };

/* uncontrolled fields + built-in browser validation */
export function NativeLeadForm({ onSend }: Props) {
  function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault(); // the browser calls onSubmit only if every field is valid
    onSend(Object.fromEntries(new FormData(e.currentTarget)));
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="native-name">Name</label>
      <input id="native-name" name="name" required minLength={2} autoComplete="name" />

      <label htmlFor="native-phone">Phone</label>
      <input
        id="native-phone"
        name="phone"
        type="tel"
        required
        pattern="[+0-9 \(\)\-]{10,18}"
        autoComplete="tel"
      />

      <button type="submit">Send</button>
    </form>
  );
}

import * as z from "zod";

export const SERVICES = ["website", "web-app", "crm"] as const;

/* "8 (700) 123-45-67", "+7 700 123 45 67", "7001234567" → "+77001234567" */
export function normalizePhone(raw: string): string {
  const digits = raw.replace(/\D/g, "");
  if (digits.length === 10) return `+7${digits}`;
  if (digits.length === 11 && /^[78]/.test(digits)) return `+7${digits.slice(1)}`;
  return raw.trim();
}

export const leadSchema = z.object({
  name: z
    .string()
    .trim()
    .min(2, { error: "Enter your name" })
    .max(80, { error: "Name is too long" }),
  phone: z
    .string()
    .transform(normalizePhone)
    .pipe(z.string().regex(/^\+7\d{10}$/, { error: "Enter a phone like +7 700 123 45 67" })),
  service: z.string().pipe(z.enum(SERVICES, { error: "Choose a service" })),
  consent: z.boolean().refine((value) => value, { error: "Consent is required to send the form" }),
});

/* what the form holds (input) and what you get after parsing (output) */
export type LeadInput = z.input<typeof leadSchema>;
export type Lead = z.output<typeof leadSchema>;

import * as z from "zod";
import { leadSchema } from "./lead-schema.ts";

/* the same schema on the server: the browser can be bypassed, the server cannot */
export function parseLead(body: unknown) {
  const result = leadSchema.safeParse(body);
  if (!result.success) {
    return { ok: false as const, fieldErrors: z.flattenError(result.error).fieldErrors };
  }
  return { ok: true as const, lead: result.data };
}

import { parseLead } from "./server-validate.ts";

console.log(parseLead({ name: "  Aigerim ", phone: "8 (700) 123-45-67", service: "crm", consent: true }));
console.log(parseLead({ name: "A", phone: "123", service: "", consent: false }));

$ node src/server-check.ts
{
  ok: true,
  lead: {
    name: 'Aigerim',
    phone: '+77001234567',
    service: 'crm',
    consent: true
  }
}
{
  ok: false,
  fieldErrors: {
    name: [ 'Enter your name' ],
    phone: [ 'Enter a phone like +7 700 123 45 67' ],
    service: [ 'Choose a service' ],
    consent: [ 'Consent is required to send the form' ]
  }
}

npm install react-hook-form zod @hookform/resolvers

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { leadSchema, type Lead, type LeadInput } from "./lead-schema.ts";

type Props = { submitLead: (lead: Lead) => Promise<void> };

const describedBy = (...ids: (string | false)[]) => ids.filter(Boolean).join(" ") || undefined;

export function LeadForm({ submitLead }: Props) {
  const {
    register,
    handleSubmit,
    setError,
    formState: { errors, isSubmitting, isSubmitSuccessful },
  } = useForm<LeadInput, unknown, Lead>({
    resolver: zodResolver(leadSchema),
    mode: "onTouched", // first check on blur, then on every change
    defaultValues: { name: "", phone: "", service: "", consent: false },
  });

  async function onSubmit(lead: Lead) {
    try {
      await submitLead(lead);
    } catch {
      setError("root.serverError", {
        message: "Could not send the request. Try again or message us on WhatsApp.",
      });
    }
  }

  if (isSubmitSuccessful) {
    return <p role="status">Thank you! We will call you back within a working day.</p>;
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate>
      <label htmlFor="lead-name">Name</label>
      <input
        id="lead-name"
        autoComplete="name"
        aria-invalid={errors.name ? true : undefined}
        aria-describedby={describedBy(!!errors.name && "lead-name-error")}
        {...register("name")}
      />
      {errors.name && <p id="lead-name-error">{errors.name.message}</p>}

      <label htmlFor="lead-phone">Phone</label>
      <input
        id="lead-phone"
        type="tel"
        autoComplete="tel"
        aria-invalid={errors.phone ? true : undefined}
        aria-describedby={describedBy("lead-phone-hint", !!errors.phone && "lead-phone-error")}
        {...register("phone")}
      />
      <p id="lead-phone-hint">Any format: 8 700…, +7 700…</p>
      {errors.phone && <p id="lead-phone-error">{errors.phone.message}</p>}

      <label htmlFor="lead-service">Service</label>
      <select
        id="lead-service"
        aria-invalid={errors.service ? true : undefined}
        aria-describedby={describedBy(!!errors.service && "lead-service-error")}
        {...register("service")}
      >
        <option value="">Choose…</option>
        <option value="website">Website</option>
        <option value="web-app">Web application</option>
        <option value="crm">CRM</option>
      </select>
      {errors.service && <p id="lead-service-error">{errors.service.message}</p>}

      <input
        id="lead-consent"
        type="checkbox"
        aria-invalid={errors.consent ? true : undefined}
        aria-describedby={describedBy(!!errors.consent && "lead-consent-error")}
        {...register("consent")}
      />
      <label htmlFor="lead-consent">I agree to the processing of my data</label>
      {errors.consent && <p id="lead-consent-error">{errors.consent.message}</p>}

      {errors.root?.serverError && <p role="alert">{errors.root.serverError.message}</p>}

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "Sending…" : "Get a quote"}
      </button>
    </form>
  );
}

import { LeadForm } from "./LeadForm.tsx";
import type { Lead } from "./lead-schema.ts";

async function submitLead(lead: Lead) {
  const res = await fetch("/api/leads", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(lead),
  });
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
}

export default function App() {
  return <LeadForm submitLead={submitLead} />;
}

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";
import { LeadForm } from "./LeadForm.tsx";

async function fillValid(user: ReturnType<typeof userEvent.setup>) {
  await user.type(screen.getByLabelText("Name"), "Aigerim");
  await user.type(screen.getByLabelText("Phone"), "8 (700) 123-45-67");
  await user.selectOptions(screen.getByLabelText("Service"), "crm");
  await user.click(screen.getByLabelText(/I agree/));
}

describe("LeadForm", () => {
  it("does not complain while typing, shows the error on blur", async () => {
    const user = userEvent.setup();
    render(<LeadForm submitLead={vi.fn()} />);
    const name = screen.getByLabelText("Name");

    await user.type(name, "A");
    expect(screen.queryByText("Enter your name")).not.toBeInTheDocument();

    await user.tab();
    expect(await screen.findByText("Enter your name")).toBeInTheDocument();
    expect(name).toHaveAttribute("aria-invalid", "true");
    expect(name).toHaveAccessibleDescription("Enter your name");

    await user.type(name, "igerim"); // after the first blur it re-validates on change
    expect(screen.queryByText("Enter your name")).not.toBeInTheDocument();
    expect(name).not.toHaveAttribute("aria-invalid");
  });

  it("on empty submit shows every error and focuses the first invalid field", async () => {
    const user = userEvent.setup();
    const submitLead = vi.fn();
    render(<LeadForm submitLead={submitLead} />);

    await user.click(screen.getByRole("button", { name: "Get a quote" }));

    expect(await screen.findByText("Choose a service")).toBeInTheDocument();
    expect(screen.getByText("Consent is required to send the form")).toBeInTheDocument();
    expect(screen.getByLabelText("Name")).toHaveFocus();
    expect(screen.getByLabelText("Phone")).toHaveAccessibleDescription(
      "Any format: 8 700…, +7 700… Enter a phone like +7 700 123 45 67",
    );
    expect(submitLead).not.toHaveBeenCalled();
  });

  it("sends normalized data once and blocks the button while pending", async () => {
    const user = userEvent.setup();
    let finish!: () => void;
    const submitLead = vi.fn(() => new Promise<void>((resolve) => (finish = resolve)));
    render(<LeadForm submitLead={submitLead} />);

    await fillValid(user);
    const button = screen.getByRole("button", { name: "Get a quote" });
    await user.dblClick(button);

    expect(await screen.findByRole("button", { name: "Sending…" })).toBeDisabled();
    expect(submitLead).toHaveBeenCalledTimes(1);
    expect(submitLead).toHaveBeenCalledWith({
      name: "Aigerim",
      phone: "+77001234567",
      service: "crm",
      consent: true,
    });

    finish();
    expect(await screen.findByRole("status")).toHaveTextContent("Thank you!");
  });

  it("shows a server error and lets the user retry", async () => {
    const user = userEvent.setup();
    const submitLead = vi.fn().mockRejectedValueOnce(new Error("HTTP 500")).mockResolvedValueOnce(undefined);
    render(<LeadForm submitLead={submitLead} />);

    await fillValid(user);
    await user.click(screen.getByRole("button", { name: "Get a quote" }));
    expect(await screen.findByRole("alert")).toHaveTextContent("Could not send the request");

    await user.click(screen.getByRole("button", { name: "Get a quote" }));
    expect(await screen.findByRole("status")).toBeInTheDocument();
    expect(submitLead).toHaveBeenCalledTimes(2);
  });
});

$ npx vitest run src/LeadForm.test.tsx --reporter=verbose
 ✓ src/LeadForm.test.tsx > LeadForm > does not complain while typing, shows the error on blur
 ✓ src/LeadForm.test.tsx > LeadForm > on empty submit shows every error and focuses the first invalid field
 ✓ src/LeadForm.test.tsx > LeadForm > sends normalized data once and blocks the button while pending
 ✓ src/LeadForm.test.tsx > LeadForm > shows a server error and lets the user retry

 Test Files  1 passed (1)
      Tests  4 passed (4)