Testing React Hook Form with Next.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80import { FieldErrors, useForm } from "react-hook-form";

interface LoginForm {
  userName: string;
  email: string;
  password: string;
  errors?: string;
}

function Forms() {
  const {
    register,
    watch,
    handleSubmit,
    formState: { errors },
    setValue,
    setError,
    reset,
    resetField,
  } = useForm<LoginForm>({
    mode: "onChange",
  });

  const onValid = (data: LoginForm) => {
    // Runs when every input in the form is filled in correctly
    console.log("I'am Valid");
    // setError('userName',{message:'이미 존재하는 계정'}) <-- duplicate ID error handling
  };
  const onInvalid = (errors: FieldErrors) => {
    // Runs when even one input in the form isn't filled in correctly
    console.log(errors);
    reset(); // If invalid, you can reset every input
  };

  return (
    <form
      className="flex flex-col gap-2 px-2 mt-2"
      onSubmit={handleSubmit(onValid, onInvalid)}
    >
      <input
        {...register("userName", {
          required: "UserName is required",
          minLength: {
            message: "The UserName should be longer than 5 chars.",
            value: 5,
          },
        })}
        type="text"
        placeholder="User Name"
        className={`${errors.userName ? "border-red-500" : ""}`}
      />
      <span className="text-red-500">{errors.userName?.message}</span>
      <input
        {...register("email", {
          required: "Email is required",
          validate: {
            notGmail: (value) =>
              !value.includes("gmail.com") || "Gmail is not allowed",
          },
        })}
        type="email"
        placeholder="Email"
      />
      <span className="text-red-500">{errors.email?.message}</span>
      <input
        {...register("password", { required: "Password is required" })}
        type="password"
        placeholder="Password"
      />
      <span className="text-red-500">{errors.password?.message}</span>
      <input
        className="w-full bg-blue-500 py-2 text-white"
        type="submit"
        value="Create"
      />
    </form>
  );
}

export default Forms;