Exibição de Erros em Formulários

"use client";
 
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
 
const Schema = z.object({
  email: z.string().email("Email inválido"),
  password: z.string().min(8, "Pelo menos 8 caracteres"),
});
 
function FormWithErrors() {
  const { register, handleSubmit, formState: { errors }, setError } = useForm({
    resolver: zodResolver(Schema),
  });
 
  return (
    <form onSubmit={handleSubmit(async (data) => {
      const res = await fetch("/api/login", { method: "POST", body: JSON.stringify(data) });
      if (!res.ok) setError("root", { message: "Credenciais inválidas" });
    })}>
      {/* Erro em nível de formulário */}
      {errors.root && (
        <div role="alert" className="rounded bg-red-50 p-3 text-sm text-red-700">
          {errors.root.message}
        </div>
      )}
 
      {/* Erro em nível de campo */}
      <div>
        <input {...register("email")} aria-invalid={!!errors.email} aria-describedby="email-error" />
        {errors.email && <p id="email-error" role="alert" className="text-sm text-red-600">{errors.email.message}</p>}
      </div>
 
      <div>
        <input {...register("password")} type="password" aria-invalid={!!errors.password} />
        {errors.password && <p role="alert" className="text-sm text-red-600">{errors.password.message}</p>}
      </div>
 
      <button type="submit">Enviar</button>
    </form>
  );
}

"use client";
 
import { useState, useEffect, useRef } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
 
const Schema = z.object({
  name: z.string().min(1, "O nome é obrigatório"),
  email: z.string().email("Por favor, insira um endereço de email válido"),
  phone: z.string().regex(/^\+?[\d\s-()]+$/, "Número de telefone inválido").optional().or(z.literal("")),
  message: z.string().min(20, "A mensagem deve ter pelo menos 20 caracteres"),
});
 
type FormData = z.infer<typeof Schema>;
 
// Componente de erro inline com animação
function FieldError({ message }: { message?: string }) {
  if (!message) return null;
  return (
    <p role="alert" className="mt-1 animate-[slideDown_0.2s_ease-out] text-sm text-red-600">
      {message}
    </p>
  );
}
 
// Banner de erro em nível de formulário
function FormBanner({ message, type }: { message: string; type: "error" | "success" }) {
  const colors = {
    error: "bg-red-50 border-red-200 text-red-800",
    success: "bg-green-50 border-green-200 text-green-800",
  };
  return (
    <div role="alert" className={`rounded border p-3 text-sm ${colors[type]}`}>
      {message}
    </div>
  );
}
 
// Notificação toast
function Toast({ message, onClose }: { message: string; onClose: () => void }) {
  useEffect(() => {
    const timer = setTimeout(onClose, 5000);
    return () => clearTimeout(timer);
  }, [onClose]);
 
  return (
    <div
      role="status"
      aria-live="polite"
      className="fixed bottom-4 right-4 rounded-lg bg-gray-900 px-4 py-3 text-sm text-white shadow-lg"
    >
      {message}
      <button onClick={onClose} className="ml-3 text-gray-400 hover:text-white">
        Fechar
      </button>
    </div>
  );
}
 
export function ContactFormWithErrors() {
  const [toast, setToast] = useState<string | null>(null);
  const errorSummaryRef = useRef<HTMLDivElement>(null);
 
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting, submitCount },
    setError,
    reset,
  } = useForm<FormData>({
    resolver: zodResolver(Schema),
    mode: "onBlur",
  });
 
  // Foca no resumo de erros quando eles aparecem
  useEffect(() => {
    if (Object.keys(errors).length > 0 && submitCount > 0) {
      errorSummaryRef.current?.focus();
    }
  }, [errors, submitCount]);
 
  async function onSubmit(data: FormData) {
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        body: JSON.stringify(data),
        headers: { "Content-Type": "application/json" },
      });
      if (!res.ok) throw new Error("Erro no servidor");
      reset();
      setToast("Mensagem enviada com sucesso!");
    } catch {
      setError("root", { message: "Falha ao enviar. Por favor, tente novamente." });
    }
  }
 
  const errorCount = Object.keys(errors).filter((k) => k !== "root").length;
 
  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)} className="max-w-md space-y-4" noValidate>
        {/* Resumo de erros no topo */}
        {errorCount > 0 && submitCount > 0 && (
          <div
            ref={errorSummaryRef}
            tabIndex={-1}
            role="alert"
            className="rounded border border-red-200 bg-red-50 p-3 outline-none"
          >
            <p className="font-medium text-red-800">
              Por favor, corrija {errorCount} {errorCount === 1 ? "erro" : "erros"}:
            </p>
            <ul className="mt-1 list-inside list-disc text-sm text-red-700">
              {errors.name && <li>{errors.name.message}</li>}
              {errors.email && <li>{errors.email.message}</li>}
              {errors.phone && <li>{errors.phone.message}</li>}
              {errors.message && <li>{errors.message.message}</li>}
            </ul>
          </div>
        )}
 
        {/* Erro do servidor */}
        {errors.root && <FormBanner message={errors.root.message!} type="error" />}
 
        <div>
          <label htmlFor="name" className="block text-sm font-medium">
            Nome <span className="text-red-500">*</span>
          </label>
          <input
            id="name"
            {...register("name")}
            aria-invalid={!!errors.name}
            aria-describedby={errors.name ? "name-err" : undefined}
            className={`w-full rounded border p-2 ${errors.name ? "border-red-500" : ""}`}
          />
          {errors.name && <FieldError message={errors.name.message} />}
        </div>
 
        <div>
          <label htmlFor="email" className="block text-sm font-medium">
            Email <span className="text-red-500">*</span>
          </label>
          <input
            id="email"
            {...register("email")}
            aria-invalid={!!errors.email}
            className={`w-full rounded border p-2 ${errors.email ? "border-red-500" : ""}`}
          />
          <FieldError message={errors.email?.message} />
        </div>
 
        <div>
          <label htmlFor="phone" className="block text-sm font-medium">Telefone</label>
          <input
            id="phone"
            {...register("phone")}
            aria-invalid={!!errors.phone}
            className={`w-full rounded border p-2 ${errors.phone ? "border-red-500" : ""}`}
          />
          <FieldError message={errors.phone?.message} />
        </div>
 
        <div>
          <label htmlFor="msg" className="block text-sm font-medium">
            Mensagem <span className="text-red-500">*</span>
          </label>
          <textarea
            id="msg"
            {...register("message")}
            rows={4}
            aria-invalid={!!errors.message}
            className={`w-full rounded border p-2 ${errors.message ? "border-red-500" : ""}`}
          />
          <FieldError message={errors.message?.message} />
        </div>
 
        <button
          type="submit"
          disabled={isSubmitting}
          className="w-full rounded bg-blue-600 px-4 py-2 text-white disabled:opacity-50"
        >
          {isSubmitting ? "Enviando..." : "Enviar Mensagem"}
        </button>
      </form>
 
      {toast && <Toast message={toast} onClose={() => setToast(null)} />}
    </>
  );
}

import { toast } from "sonner";
 
async function onSubmit(data: FormData) {
  try {
    await submitForm(data);
    toast.success("Salvo com sucesso!");
  } catch (err) {
    toast.error("Algo deu errado", { description: err.message });
  }
}

function FormErrorBoundary({ children }: { children: React.ReactNode }) {
  return (
    <ErrorBoundary
      fallback={
        <div role="alert" className="rounded bg-red-50 p-4 text-red-800">
          Ocorreu um erro. Por favor, atualize e tente novamente.
        </div>
      }
    >
      {children}
    </ErrorBoundary>
  );
}

function PasswordField({ register, error }: { register: any; error?: FieldError }) {
  const value = useWatch({ name: "password" });
  const rules = [
    { test: (v: string) => v.length >= 8, label: "8+ caracteres" },
    { test: (v: string) => /[A-Z]/.test(v), label: "Letra maiúscula" },
    { test: (v: string) => /\d/.test(v), label: "Número" },
  ];
 
  return (
    <div>
      <input {...register("password")} type="password" />
      <ul className="mt-1 space-y-0.5 text-xs">
        {rules.map((r) => (
          <li key={r.label} className={r.test(value || "") ? "text-green-600" : "text-gray-400"}>
            {r.test(value || "") ? "check" : "circle"} {r.label}
          </li>
        ))}
      </ul>
    </div>
  );
}

// Tipo FieldError do react-hook-form
import type { FieldError } from "react-hook-form";
 
function ErrorMessage({ error }: { error?: FieldError }) {
  if (!error) return null;
  return <p className="text-red-600">{error.message}</p>;
}
 
// Chaves de erro tipadas
type FormErrors = Record<keyof FormData, FieldError | undefined>;