React: How to implement form validation in React?

1import { useState } from "react";
2
3interface FormData {
4  email: string;
5  password: string;
6}
7
8interface Errors {
9  email?: string;
10  password?: string;
11}
12
13function RegistrationForm() {
14  const [formData, setFormData] = useState<FormData>({ email: "", password: "" });
15  const [errors, setErrors] = useState<Errors>({});
16
17  const validate = (): boolean => {
18    const newErrors: Errors = {};
19
20    if (!formData.email) {
21      newErrors.email = "Email is required";
22    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
23      newErrors.email = "Invalid email format";
24    }
25
26    if (!formData.password) {
27      newErrors.password = "Password is required";
28    } else if (formData.password.length < 8) {
29      newErrors.password = "Password must be at least 8 characters";
30    }
31
32    setErrors(newErrors);
33    return Object.keys(newErrors).length === 0;
34  };
35
36  const handleSubmit = (e: React.FormEvent) => {
37    e.preventDefault();
38    if (validate()) {
39      console.log("Submit:", formData);
40    }
41  };
42
43  return (
44    <form onSubmit={handleSubmit}>
45      <div>
46        <input
47          type="email"
48          value={formData.email}
49          onChange={e => setFormData(prev => ({ ...prev, email: e.target.value }))}
50        />
51        {errors.email && <span className="error">{errors.email}</span>}
52      </div>
53      <div>
54        <input
55          type="password"
56          value={formData.password}
57          onChange={e => setFormData(prev => ({ ...prev, password: e.target.value }))}
58        />
59        {errors.password && <span className="error">{errors.password}</span>}
60      </div>
61      <button type="submit">Register</button>
62    </form>
63  );
64}

1import { useForm } from "react-hook-form";
2import { zodResolver } from "@hookform/resolvers/zod";
3import { z } from "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});
9
10type FormData = z.infer<typeof schema>;
11
12function RegistrationForm() {
13  const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
14    resolver: zodResolver(schema),
15  });
16
17  const onSubmit = (data: FormData) => console.log(data);
18
19  return (
20    <form onSubmit={handleSubmit(onSubmit)}>
21      <input {...register("email")} />
22      {errors.email && <span>{errors.email.message}</span>}
23      <input {...register("password")} type="password" />
24      {errors.password && <span>{errors.password.message}</span>}
25      <button type="submit">Register</button>
26    </form>
27  );
28}