How to Handle Form Validation with Cursor

1import { useForm } from 'react-hook-form';
2import { zodResolver } from '@hookform/resolvers/zod';
3import { z } from 'zod';
4
5const registrationSchema = z
6  .object({
7    email: z.string().email('Enter a valid email address'),
8    password: z
9      .string()
10      .min(8, 'Password must be at least 8 characters')
11      .regex(/[A-Z]/, 'Password must contain at least one uppercase letter'),
12    confirmPassword: z.string().min(1, 'Please confirm your password'),
13    username: z
14      .string()
15      .min(3, 'Username must be at least 3 characters')
16      .max(20, 'Username must be 20 characters or fewer')
17      .regex(/^[a-zA-Z0-9]+$/, 'Username can only contain letters and numbers'),
18    accountType: z.enum(['Personal', 'Business']),
19    companyName: z.string().optional(),
20  })
21  .refine((data) => data.password === data.confirmPassword, {
22    message: 'Passwords do not match',
23    path: ['confirmPassword'],
24  })
25  .superRefine((data, ctx) => {
26    if (data.accountType === 'Business' && !data.companyName) {
27      ctx.addIssue({
28        code: z.ZodIssueCode.custom,
29        message: 'Company name is required for business accounts',
30        path: ['companyName'],
31      });
32    }
33  });
34
35type RegistrationFormData = z.infer<typeof registrationSchema>;
36
37interface RegistrationFormProps {
38  onSuccess: (data: RegistrationFormData) => void;
39}
40
41export function RegistrationForm({ onSuccess }: RegistrationFormProps) {
42  const {
43    register,
44    handleSubmit,
45    watch,
46    setError,
47    formState: { errors, isSubmitting, isValid },
48  } = useForm<RegistrationFormData>({
49    resolver: zodResolver(registrationSchema),
50    mode: 'onChange',
51    defaultValues: { accountType: 'Personal' },
52  });
53
54  const accountType = watch('accountType');
55
56  const onSubmit = async (data: RegistrationFormData) => {
57    try {
58      const res = await fetch('/api/register', {
59        method: 'POST',
60        headers: { 'Content-Type': 'application/json' },
61        body: JSON.stringify(data),
62      });
63      if (!res.ok) {
64        const errs: { field: keyof RegistrationFormData; message: string }[] =
65          await res.json();
66        errs.forEach(({ field, message }) => setError(field, { message }));
67        return;
68      }
69      onSuccess(data);
70    } catch {
71      setError('root', { message: 'Network error — please try again' });
72    }
73  };
74
75  return (
76    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 max-w-md">
77      {errors.root && (
78        <p className="text-red-500 text-sm">{errors.root.message}</p>
79      )}
80      <div>
81        <input {...register('email')} placeholder="Email" className="input" />
82        {errors.email && (
83          <p className="text-red-500 text-sm">{errors.email.message}</p>
84        )}
85      </div>
86      <div>
87        <input
88          {...register('password')}
89          type="password"
90          placeholder="Password"
91          className="input"
92        />
93        {errors.password && (
94          <p className="text-red-500 text-sm">{errors.password.message}</p>
95        )}
96      </div>
97      <div>
98        <input
99          {...register('confirmPassword')}
100          type="password"
101          placeholder="Confirm password"
102          className="input"
103        />
104        {errors.confirmPassword && (
105          <p className="text-red-500 text-sm">{errors.confirmPassword.message}</p>
106        )}
107      </div>
108      <div>
109        <input
110          {...register('username')}
111          placeholder="Username"
112          className="input"
113        />
114        {errors.username && (
115          <p className="text-red-500 text-sm">{errors.username.message}</p>
116        )}
117      </div>
118      <select {...register('accountType')} className="input">
119        <option value="Personal">Personal</option>
120        <option value="Business">Business</option>
121      </select>
122      {accountType === 'Business' && (
123        <div>
124          <input
125            {...register('companyName')}
126            placeholder="Company name"
127            className="input"
128          />
129          {errors.companyName && (
130            <p className="text-red-500 text-sm">{errors.companyName.message}</p>
131          )}
132        </div>
133      )}
134      <button type="submit" disabled={!isValid || isSubmitting}>
135        {isSubmitting ? 'Registering...' : 'Register'}
136      </button>
137    </form>
138  );
139}