React: How to implement form validation with Zod?

1import { z } from "zod";
2import { useForm } from "react-hook-form";
3import { zodResolver } from "@hookform/resolvers/zod";
4
5const schema = z.object({
6  email: z.string().email("Invalid email"),
7  password: z.string().min(8, "Password must be at least 8 characters"),
8  confirmPassword: z.string(),
9}).refine((data) => data.password === data.confirmPassword, {
10  message: "Passwords don't match",
11  path: ["confirmPassword"],
12});
13
14type FormData = z.infer<typeof schema>;
15
16function RegistrationForm() {
17  const {
18    register,
19    handleSubmit,
20    formState: { errors },
21  } = useForm<FormData>({
22    resolver: zodResolver(schema),
23  });
24
25  const onSubmit = (data: FormData) => {
26    console.log(data);
27  };
28
29  return (
30    <form onSubmit={handleSubmit(onSubmit)}>
31      <div>
32        <input {...register("email")} type="email" placeholder="Email" />
33        {errors.email && <span className="error">{errors.email.message}</span>}
34      </div>
35      <div>
36        <input {...register("password")} type="password" placeholder="Password" />
37        {errors.password && <span className="error">{errors.password.message}</span>}
38      </div>
39      <div>
40        <input {...register("confirmPassword")} type="password" placeholder="Confirm" />
41        {errors.confirmPassword && (
42          <span className="error">{errors.confirmPassword.message}</span>
43        )}
44      </div>
45      <button type="submit">Register</button>
46    </form>
47  );
48}