signUpForm1: tel3 のバリデーションを tel1, tel2 で発火させるHEADmain

1 files changed, 3 insertions, 3 deletions

diff --git a/src/SignUpForm1.tsx b/src/SignUpForm1.tsx
index 4be29e9..9e17bef 100644
--- a/src/SignUpForm1.tsx
+++ b/src/SignUpForm1.tsx
@@ -5,7 +5,7 @@ import { useNavigate } from 'react-router-dom';
 import { Form1Data, form1Schema } from './signUpSchema'
 
 export const SignUpForm1 = () => {
-  const { register, handleSubmit, formState: { errors } } = useForm<Form1Data>({
+  const { register, handleSubmit, formState: { errors }, trigger } = useForm<Form1Data>({
     resolver: zodResolver(form1Schema),
   });
   const navigate = useNavigate();
@@ -31,8 +31,8 @@ export const SignUpForm1 = () => {
         </div>
         <div>
           <label>電話番号</label>
-          <input id="tel1" type="text" {...register('tel1')}></input>-
-          <input id="tel2" type="text" {...register('tel2')}></input>-
+          <input id="tel1" type="text" {...register('tel1', { onChange: () => trigger('tel3') })}></input>-
+          <input id="tel2" type="text" {...register('tel2', { onChange: () => trigger('tel3') })}></input>-
           <input id="tel3" type="text" {...register('tel3')}></input>
           <div className="error">{errors.tel3?.message}</div>
         </div>