Form validáció (gyakorlati)

import { z } from "zod"

const loginFormSchema = z.object({
  email: z.string().email("Érvényes email cím szükséges"),
  password: z.string().min(8, "A jelszónak legalább 8 karakter hosszúnak kell lennie"),
  rememberMe: z.boolean().optional().default(false),
})

type LoginFormData = z.infer<typeof loginFormSchema>

const registerSchema = z
  .object({
    email: z.string().email(),
    password: z.string().min(8),
    confirmPassword: z.string(),
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: "A két jelszó nem egyezik",
    path: ["confirmPassword"],
  })

async function handleLoginSubmit(formData: FormData) {
  const rawData = {
    email: formData.get("email"),
    password: formData.get("password"),
  }

  const result = loginFormSchema.safeParse(rawData)
  if (!result.success) {
    return { errors: result.error.flatten().fieldErrors }
  }

  await loginUser(result.data)
}

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"

function LoginForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<LoginFormData>({
    resolver: zodResolver(loginFormSchema),
  })

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input {...register("email")} />
      {errors.email && <span>{errors.email.message}</span>}

      <input type="password" {...register("password")} />
      {errors.password && <span>{errors.password.message}</span>}
    </form>
  )
}