diff options
Diffstat (limited to 'src/SignUpForm1.tsx')
-rw-r--r-- | src/SignUpForm1.tsx | 48 |
1 files changed, 8 insertions, 40 deletions
diff --git a/src/SignUpForm1.tsx b/src/SignUpForm1.tsx index fee515f..76c6020 100644 --- a/src/SignUpForm1.tsx +++ b/src/SignUpForm1.tsx @@ -1,49 +1,18 @@ import './SignUp.css' import { useForm } from 'react-hook-form' import { zodResolver } from "@hookform/resolvers/zod" -import * as z from "zod" -import parsePhoneNumber from 'libphonenumber-js' - -const kanaRegex = /^[ァ-ン]+$/ - -const schema = z.object({ - name: z.string().min(1, { message: '必須項目です' }), - kana: z.string().min(1, { message: '必須項目です' }).regex(kanaRegex, { message: 'カタカナを入力してください' }), - tel1: z.string(), - tel2: z.string(), - tel3: z.string(), -}).refine( - ({ tel1, tel2, tel3 }) => (tel1.length > 0 && tel2.length > 0 && tel3.length > 0), - { - message: '必須項目です', - path: ['tel3'], - } -).refine( - ({ tel1, tel2, tel3 }) => { - const phoneNumber = parsePhoneNumber('+81' + `${tel1}${tel2}${tel3}`) - console.log([`${tel1}${tel2}${tel3}`, phoneNumber?.isValid()]) - return phoneNumber?.isValid() - }, - { - message: '電話番号が不正です', - path: ['tel3'], - } -) - -type Form1 = { - name: string, - kana: string, - tel1: string, - tel2: string, - tel3: string, -} +import { useNavigate } from 'react-router-dom'; +import { Form1, form1Schema } from './signUpSchema' export const SignUpForm1 = () => { const { register, handleSubmit, formState: { errors } } = useForm<Form1>({ - resolver: zodResolver(schema), + resolver: zodResolver(form1Schema), }); + const navigate = useNavigate(); - const onsubmit = (data: Form1) => console.log(data); + const onsubmit = (state: Form1) => { + navigate('/sign-up/form2', { state }) + } const onerror = (err: any) => console.log(err); return ( @@ -70,8 +39,7 @@ export const SignUpForm1 = () => { <div> <button type="submit">次へ</button> </div> - </form > + </form> </> ); } - |