【2022年】 React Hook FormでValidationライブラリはどれにするか?

npm install @hookform/resolvers
npm install yup

import { Stack, TextField, Button } from '@mui/material'
import { useForm, SubmitHandler, Controller } from 'react-hook-form'

+ import { yupResolver } from '@hookform/resolvers/yup'
+ import * as yup from "yup"

// yupを使用しない場合
- // type Inputs = {
- //  name: string
- // }

- // const validationRules = {
- //   name: {
- //     required: '名前を入力してください。',
- //     minLength: { value: 4, message: '4文字以上で入力してください。' }
- //   }
- // }

// yupを使用する場合
+ const schema = yup.object({
+   name: yup.string()
+         .required('名前を入力してください。')
+         .min(4, '4文字以上で入力してください。'),
+ })

+ type Inputs = yup.InferType<typeof schema>



export function InputReactHookFormTextField() {
  const {
    control,
    handleSubmit
  } = useForm<Inputs>({
    defaultValues: { name: 'piyoko' },
+     resolver: yupResolver(schema) // yupを使用する場合は指定する
  })

  
  const onSubmit: SubmitHandler<Inputs> = (data: Inputs) => {
    console.log(`submit: ${data.name} typeof: ${typeof data.name}`)
  }

  return (
    <Stack component="form" noValidate 
    onSubmit={handleSubmit(onSubmit)} 
    spacing={2} sx={{ m: 2, width: '25ch' }}>

      <Controller
        name="name"
        control={control}
-        // rules={validationRules.name} // yup を使用しない場合は必要
        render={({ field, fieldState }) => (
          <TextField
            {...field}
            type="text"
            label="名前"
            error={fieldState.invalid}  
            helperText={fieldState.error?.message}
          />
        )}
      />
      <Button variant="contained" type="submit" >
        送信する
      </Button>
    </Stack>
  )
}

npm install @hookform/resolvers
npm install zod

import { Stack, TextField, Button } from '@mui/material'
import { useForm, SubmitHandler, Controller } from 'react-hook-form'

+ import { zodResolver } from '@hookform/resolvers/zod'
+ import { z } from "zod"

// zodを使用しない場合
- // type Inputs = {
- //   name: string
- // }

- // const validationRules = {
- //   name: {
- //     required: '名前を入力してください。',
- //     minLength: { value: 4, message: '4文字以上で入力してください。' }
- //   }
- // }

// zodを使用する場合
+ const schema = z.object({
+   name: z.string()
+         .nonempty('名前を入力してください。-zod')
+         .min(4, '4文字以上で入力してください。-zod')
+ })

+ type Inputs = z.infer<typeof schema>


export function InputReactHookFormTextField() {
  const {
    control,
    handleSubmit
  } = useForm<Inputs>({
    defaultValues: { name: 'piyoko' },
+     resolver: zodResolver(schema)     // zodを使用する場合は指定する
  })



  const onSubmit: SubmitHandler<Inputs> = (data: Inputs) => {
    console.log(`submit: ${data.name}`)
  }

  return (
    <Stack component="form" noValidate 
    onSubmit={handleSubmit(onSubmit)} 
    spacing={2} sx={{ m: 2, width: '25ch' }}>

      {/* コントローラー */}
      <Controller
        name="name"
        control={control}
-        // rules={validationRules.name}   // zod を使用しない場合は必要
        render={({ field, fieldState }) => (
          <TextField
            {...field}
            type="text"
            label="名前"
            error={fieldState.invalid}  
            helperText={fieldState.error?.message}
          />
        )}
      />
      <Button variant="contained" type="submit" >
        送信する
      </Button>
    </Stack>
  )
}

import { Stack, TextField, Button } from '@mui/material'
import { useForm, SubmitHandler, Controller } from 'react-hook-form'

+ import { yupResolver } from '@hookform/resolvers/yup'
+ import * as yup from "yup"

// yupを使用しない場合
- // type Inputs = {
- //  name: string
- // }

- // const validationRules = {
- //   name: {
- //     required: '名前を入力してください。',
- //     minLength: { value: 4, message: '4文字以上で入力してください。' }
- //   }
- // }

// yupを使用する場合
+ const schema = yup.object({
+   name: yup.string()
+         .required('名前を入力してください。')
+         .min(4, '4文字以上で入力してください。'),
+ })

type Inputs = yup.InferType<typeof schema>


export function InputReactHookFormTextField() {
  const {
    control,
    handleSubmit
  } = useForm<Inputs>({
    defaultValues: { name: 'piyoko' },
+     resolver: yupResolver(schema) // yupを使用する場合は指定する
  })

  
  const onSubmit: SubmitHandler<Inputs> = (data: Inputs) => {
    console.log(`submit: ${data.name} typeof: ${typeof data.name}`)
  }

  return (
    <Stack component="form" noValidate 
    onSubmit={handleSubmit(onSubmit)} 
    spacing={2} sx={{ m: 2, width: '25ch' }}>

      <Controller
        name="name"
        control={control}
-        // rules={validationRules.name} // yup を使用しない場合は必要
        render={({ field, fieldState }) => (
          <TextField
            {...field}
            type="text"
            label="名前"
            error={fieldState.invalid}  
            helperText={fieldState.error?.message}
          />
        )}
      />
      <Button variant="contained" type="submit" >
        送信する
      </Button>
    </Stack>
  )
}

import { Stack, TextField, Button } from '@mui/material'
import { useForm, SubmitHandler, Controller } from 'react-hook-form'

+ import { zodResolver } from '@hookform/resolvers/zod'
+ import { z } from "zod"

// zodを使用しない場合
- // type Inputs = {
- //   name: string
- // }

- // const validationRules = {
- //   name: {
- //     required: '名前を入力してください。',
- //     minLength: { value: 4, message: '4文字以上で入力してください。' }
- //   }
- // }

// zodを使用する場合
+ const schema = z.object({
+   name: z.string()
+         .nonempty('名前を入力してください。')
+         .min(4, '4文字以上で入力してください。')
+ })

+ type Inputs = z.infer<typeof schema>


export function InputReactHookFormTextField() {
  const {
    control,
    handleSubmit
  } = useForm<Inputs>({
    defaultValues: { name: 'piyoko' },
+     resolver: zodResolver(schema)     // zodを使用する場合は指定する
  })



  const onSubmit: SubmitHandler<Inputs> = (data: Inputs) => {
    console.log(`submit: ${data.name}`)
  }

  return (
    <Stack component="form" noValidate 
    onSubmit={handleSubmit(onSubmit)} 
    spacing={2} sx={{ m: 2, width: '25ch' }}>

      {/* コントローラー */}
      <Controller
        name="name"
        control={control}
-        // rules={validationRules.name}   // zod を使用しない場合は必要
        render={({ field, fieldState }) => (
          <TextField
            {...field}
            type="text"
            label="名前"
            error={fieldState.invalid}  
            helperText={fieldState.error?.message}
          />
        )}
      />
      <Button variant="contained" type="submit" >
        送信する
      </Button>
    </Stack>
  )
}

import { Stack, FormControl, InputLabel, Select, MenuItem, FormHelperText, Button } from '@mui/material'
import { useForm, SubmitHandler, Controller } from 'react-hook-form'
+ import { yupResolver } from '@hookform/resolvers/yup'
+ import * as yup from "yup"

- // type Inputs = {
- //   area: number | ''
- // }

- // const validationRules = {
- //   area: {
- //     validate: (value:number | '') => value !== '' || 'いずれかを選択してください。'
- //   }
- // }

+ const schema = yup.object({
+   area: yup.number()
+     .transform((value, originalvalue) => originalvalue === '' ? undefined : value)
+     .required('いずれかを選択してください。')
+ })

+ type Inputs = yup.InferType<typeof schema>

export function InputReactHookFormSelect() {

  const {
    control,
    handleSubmit
  } = useForm<Inputs>({
    defaultValues: { area: 6 },
+    resolver: yupResolver(schema)
  })
  

  const onSubmit: SubmitHandler<Inputs> = (data: Inputs) => {
    console.log(`submit: ${data.area} typeof: ${typeof data.area}`)
  }

  return (
    <Stack component="form" noValidate 
      onSubmit={handleSubmit(onSubmit)} 
      spacing={2} 
      sx={{ m: 2, width: '25ch' }}>

      <Controller
        name="area"
        control={control}
-        // rules={validationRules.area}
        render={({ field, fieldState }) => (
          <FormControl fullWidth error={fieldState.invalid}>
            <InputLabel id="area-label">地域</InputLabel>
            <Select
              labelId="area-label"
              label="　　" // フォーカスを外した時のラベルの部分こ（これを指定しないとラベルとコントロール線が被る）
              {...field}
            >
              <MenuItem value='' sx={{color:'gray'}}>未選択</MenuItem>
              <MenuItem value={1}>北海道</MenuItem>
              <MenuItem value={2}>東北</MenuItem>
              <MenuItem value={4}>関東</MenuItem>
              <MenuItem value={5}>中部</MenuItem>
              <MenuItem value={6}>近畿</MenuItem>
              <MenuItem value={7}>中国</MenuItem>
              <MenuItem value={8}>四国</MenuItem>
              <MenuItem value={9}>九州沖縄</MenuItem>
            </Select>
            <FormHelperText>{fieldState.error?.message}</FormHelperText>
          </FormControl>
        )}
      />
      <Button variant="contained" type="submit" >
        送信する
      </Button>
    </Stack>
  )
}

/* eslint-disable react/jsx-props-no-spreading */
import { Stack, FormControl, InputLabel, Select, MenuItem, FormHelperText, Button } from '@mui/material'
import { useForm, SubmitHandler, Controller } from 'react-hook-form'
+ import { zodResolver } from '@hookform/resolvers/zod'
+ import { z } from "zod"

- // type Inputs = {
- //   area: number | ''
- // }

- // const validationRules = {
- //   area: {
- //     validate: (value:number | '') => value !== '' || 'いずれかを選択してください。'
- //   }
- // }

+ const schema = z.object({
+   area: z.union([z.string(), z.number()])
+        .refine(
+         (val) => val !== '', { message: 'いずれかを選択してください。' }
+        )
+ })

+ type Inputs = z.infer<typeof schema>

export function InputReactHookFormSelect() {

  const {
    control,
    handleSubmit
  } = useForm<Inputs>({
    defaultValues: { area: 6 },
+     resolver: zodResolver(schema)
  })
  

  const onSubmit: SubmitHandler<Inputs> = (data: Inputs) => {
    console.log(`submit: ${data.area}`)
  }

  return (
    <Stack component="form" noValidate 
      onSubmit={handleSubmit(onSubmit)} 
      spacing={2} 
      sx={{ m: 2, width: '25ch' }}>

      <Controller
        name="area"
        control={control}
-        // rules={validationRules.area}
        render={({ field, fieldState }) => (
          <FormControl fullWidth error={fieldState.invalid}>
            <InputLabel id="area-label">地域</InputLabel>
            <Select
              labelId="area-label"
              label="　　" // フォーカスを外した時のラベルの部分こ（これを指定しないとラベルとコントロール線が被る）
              {...field}
            >
              <MenuItem value='' sx={{color:'gray'}}>未選択</MenuItem>
              <MenuItem value={1}>北海道</MenuItem>
              <MenuItem value={2}>東北</MenuItem>
              <MenuItem value={4}>関東</MenuItem>
              <MenuItem value={5}>中部</MenuItem>
              <MenuItem value={6}>近畿</MenuItem>
              <MenuItem value={7}>中国</MenuItem>
              <MenuItem value={8}>四国</MenuItem>
              <MenuItem value={9}>九州沖縄</MenuItem>
            </Select>
            <FormHelperText>{fieldState.error?.message}</FormHelperText>
          </FormControl>
        )}
      />
      <Button variant="contained" type="submit" >
        送信する
      </Button>
    </Stack>
  )
}

import {
  Stack,
  RadioGroup,
  FormLabel,
  FormControlLabel,
  Radio,
  FormControl,
  Button,
  FormHelperText
} from '@mui/material'
import { useForm, SubmitHandler, Controller } from 'react-hook-form'
+ import { yupResolver } from '@hookform/resolvers/yup'
+ import * as yup from "yup"

- // type Inputs = {
- //   gender: number
- // }

- //  const validationRules = {
- //   gender: {
- //     validate: (value: number) => value !== -1 || 'いずれかを選択してください。'
- //   }
- // }

+ const schema = yup.object({
+  gender: yup.number().moreThan(-1,'いずれかを選択してください。')
+ })

+ type Inputs = yup.InferType<typeof schema>

export function InputReactHookFormRadioGroup() {
  const {
    control,
    handleSubmit
  } = useForm<Inputs>({
    defaultValues: { gender: -1 },
+    resolver: yupResolver(schema)
  })

 
  const onSubmit: SubmitHandler<Inputs> = (data: Inputs) => {
    console.log(`submit: ${data.gender} typeof: ${typeof data.gender}`)
  }

  return (
    <Stack component="form" noValidate onSubmit={handleSubmit(onSubmit)} spacing={2} sx={{ m: 2, width: '25ch' }}>
      {/* 6.Controllerコンポーネントで TextFieldをReactHookFormと紐づけます。 */}
      <Controller
        name="gender"
        control={control}
-        // rules={validationRules.gender}
        render={({ field, fieldState }) => (
          <FormControl error={fieldState.invalid}>
            <FormLabel id="radio-buttons-group-label">Gender</FormLabel>
            <RadioGroup 
              aria-labelledby="radio-buttons-group-label" 
              value={field.value} name="gender">
              <FormControlLabel {...field} value={1} control={<Radio />} label="男性" />
              <FormControlLabel {...field} value={2} control={<Radio />} label="女性" />
              <FormControlLabel {...field} value={0} control={<Radio />} label="未回答" />
            </RadioGroup>
            <FormHelperText>{fieldState.error?.message}</FormHelperText>
          </FormControl>
        )}
      />

      <Button variant="contained" type="submit">
        送信する
      </Button>
    </Stack>
  )
}

import {
  Stack,
  RadioGroup,
  FormLabel,
  FormControlLabel,
  Radio,
  FormControl,
  Button,
  FormHelperText
} from '@mui/material'
import { useForm, SubmitHandler, Controller } from 'react-hook-form'
+ import { zodResolver } from '@hookform/resolvers/zod'
+ import { z } from "zod"

- // type Inputs = {
- //   gender: number
- // }

- // const validationRules = {
- //   gender: {
- //     validate: (value: number) => value !== -1 || 'いずれかを選択してください。'
- //   }
- // }

+ const schema = z.object({
+   gender: z.number()
+       .or(z.string().transform(Number))
+       .refine(
+         (val) => val > 0, 'いずれかを選択してください。')
+ })

+ type Inputs = z.infer<typeof schema>

export function InputReactHookFormRadioGroup() {

  const {
    control,
    handleSubmit,
  } = useForm<Inputs>({
    defaultValues: { gender: -1 },
+     resolver: zodResolver(schema)
  })


  const onSubmit: SubmitHandler<Inputs> = (data: Inputs) => {
    console.log(`submit: ${data.gender} typeof ${typeof data.gender}`)
  }

  return (
    <Stack component="form" noValidate onSubmit={handleSubmit(onSubmit)} spacing={2} sx={{ m: 2, width: '25ch' }}>
      
      <Controller
        name="gender"
        control={control}
-        // rules={validationRules.gender}
        render={({ field, fieldState }) => (
          <FormControl error={fieldState.invalid}>
            <FormLabel id="radio-buttons-group-label">Gender</FormLabel>
            <RadioGroup 
              aria-labelledby="radio-buttons-group-label" 
              value={field.value} name="gender">
              <FormControlLabel {...field} value={1} control={<Radio />} label="男性" />
              <FormControlLabel {...field} value={2} control={<Radio />} label="女性" />
              <FormControlLabel {...field} value={3} control={<Radio />} label="未回答" />
            </RadioGroup>
            <FormHelperText>{fieldState.error?.message}</FormHelperText>
          </FormControl>
        )}
      />

      <Button variant="contained" type="submit">
        送信する
      </Button>
    </Stack>
  )
}

import * as React from 'react'
import { Stack, TextField, Button } from '@mui/material'
import { useForm, SubmitHandler, Controller } from 'react-hook-form'
import { LocalizationProvider, DatePicker } from '@mui/lab'
import AdapterDateFns from '@mui/lab/AdapterDateFns'
import ja from 'date-fns/locale/ja'
+ import { yupResolver } from '@hookform/resolvers/yup'
+ import * as yup from "yup"

- // type Inputs = {
- //   applicationDate: Date | null
- // }

- // const validationRules = {
- //   applicationDate: {
- //     validate: (val: Date | null) => {
- //       if (val == null) {
- //         return '申請日を入力してください。'
- //       }
- //       if (Number.isNaN(val.getTime())) {
- //         return '日付を正しく入力してください。'
- //       }
- //       return true
- //     }
- //   }
- // }

+ const schema = yup.object({
+   applicationDate: yup.date()
+   .transform((value, originalvalue) => originalvalue == null ? undefined : value)
+   .required('申請日を入力してください。')
+   .typeError('日付を正しく入力してください。')
+ })
+ type Inputs = yup.InferType<typeof schema>


export function InputDateTimePicker() {
  const {
    control,
    handleSubmit,
  } = useForm<Inputs>({
    defaultValues: { applicationDate: new Date() },
+     resolver: yupResolver(schema)
  })

  

  const onSubmit: SubmitHandler<Inputs> = (data: Inputs) => {
    console.log(`submit: ${data.applicationDate} typeof: ${typeof data.applicationDate}`)
  }

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns} locale={ja}>
      <Stack component="form" noValidate onSubmit={handleSubmit(onSubmit)} spacing={2} sx={{ m: 2, width: '25ch' }}>
        <Controller
          name="applicationDate"
          control={control}
-          // rules={validationRules.applicationDate}
          render={({ field, fieldState }) => (
            <DatePicker
              label="申請日"
              inputFormat="yyyy年MM月dd日"
              mask="____年__月__日"
              leftArrowButtonText="前月を表示"
              rightArrowButtonText="次月を表示"
              toolbarTitle="日付選択"
              cancelText="キャンセル"
              okText="選択"
              toolbarFormat="yyyy年MM月dd日"
              renderInput={(params) => (
                <TextField
                  {...params}
                  error={fieldState.invalid}
                  helperText={fieldState.invalid ? fieldState?.error?.message : null}
                
                />
              )}
              PaperProps={{ sx: styles.paperprops }}
              DialogProps={{ sx: styles.mobiledialogprops }}
              {...field}
              
            />
          )}
        />

        <Button variant="contained" type="submit">
          送信する
        </Button>
      </Stack>
    </LocalizationProvider>
  )
}

const styles = {
  componentsProps: {
    color: 'green'
  },
  paperprops: {
    'div[role=presentation]': {
      display: 'flex',
      '& .PrivatePickersFadeTransitionGroup-root:first-of-type': {
        order: 2
      },
      '& .PrivatePickersFadeTransitionGroup-root:nth-of-type(2)': {
        order: 1,
        '& div::after': {
          content: '"年"'
        }
      },
      '& .MuiButtonBase-root': {
        order: 3
      }
    }
  },
  mobiledialogprops: {
    '.PrivatePickersToolbar-dateTitleContainer .MuiTypography-root': {
      fontSize: '1.5rem'
    },
    'div[role=presentation]:first-of-type': {
      display: 'flex',
      '& .PrivatePickersFadeTransitionGroup-root:first-of-type': {
        order: 2
      },
      '& .PrivatePickersFadeTransitionGroup-root:nth-of-type(2)': {
        order: 1,
        '& > div::after': {
          content: '"年"'
        }
      },
      '& .MuiButtonBase-root': {
        order: 3
      }
    }
  }
}

/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable @typescript-eslint/no-use-before-define */
import * as React from 'react'
import { Stack, TextField, Button } from '@mui/material'
import { useForm, SubmitHandler, Controller } from 'react-hook-form'
import { LocalizationProvider, DatePicker } from '@mui/lab'
import AdapterDateFns from '@mui/lab/AdapterDateFns'
import ja from 'date-fns/locale/ja'
+ import { zodResolver } from '@hookform/resolvers/zod'
+ import { z } from "zod"

- // type Inputs = {
- //   applicationDate: Date | null
- // }

- // const validationRules = {
- //   applicationDate: {
- //     validate: (val: Date | null) => {
- //       if (val == null) {
- //         return '申請日を入力してください。'
- //       }
- //       if (Number.isNaN(val.getTime())) {
- //         return '日付を正しく入力してください。'
- //       }
- //       return true
- //     }
- //   }
- // }

+ const errMap: z.ZodErrorMap = (issue, _ctx) => {
+   let message
+   switch (issue.code) {
+     case z.ZodIssueCode.invalid_type:
+       message = `申請日を入力してください。`
+       break
+     case z.ZodIssueCode.invalid_date:
+       message = `日付を正しく入力してください。`
+       break
+     default:
+       message = _ctx.defaultError
+   }
+   return { message }
+ }


+ const schema = z.object({
+   applicationDate: z.date({errorMap: errMap})
+ })

+ type Inputs = z.infer<typeof schema>

export function InputDateTimePicker() {
  const {
    control,
    handleSubmit,
  } = useForm<Inputs>({
    defaultValues: { applicationDate: new Date() },
+    resolver: zodResolver(schema)
  })

  

  const onSubmit: SubmitHandler<Inputs> = (data: Inputs) => {
    console.log(`submit: ${data.applicationDate}`)
  }

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns} locale={ja}>
      <Stack component="form" noValidate onSubmit={handleSubmit(onSubmit)} spacing={2} sx={{ m: 2, width: '25ch' }}>
        <Controller
          name="applicationDate"
          control={control}
-          // rules={validationRules.applicationDate}
          render={({ field, fieldState }) => (
            <DatePicker
              label="申請日"
              inputFormat="yyyy年MM月dd日"
              mask="____年__月__日"
              leftArrowButtonText="前月を表示"
              rightArrowButtonText="次月を表示"
              toolbarTitle="日付選択"
              cancelText="キャンセル"
              okText="選択"
              toolbarFormat="yyyy年MM月dd日"
              renderInput={(params) => (
                <TextField
                  {...params}
                  error={fieldState.invalid}
                  helperText={fieldState.invalid ? fieldState?.error?.message : null}
                />
              )}
              PaperProps={{ sx: styles.paperprops }}
              DialogProps={{ sx: styles.mobiledialogprops }}
              {...field}
              
            />
          )}
        />

        <Button variant="contained" type="submit">
          送信する
        </Button>
      </Stack>
    </LocalizationProvider>
  )
}

const styles = {
  componentsProps: {
    color: 'green'
  },
  paperprops: {
    'div[role=presentation]': {
      display: 'flex',
      '& .PrivatePickersFadeTransitionGroup-root:first-of-type': {
        order: 2
      },
      '& .PrivatePickersFadeTransitionGroup-root:nth-of-type(2)': {
        order: 1,
        '& div::after': {
          content: '"年"'
        }
      },
      '& .MuiButtonBase-root': {
        order: 3
      }
    }
  },
  mobiledialogprops: {
    '.PrivatePickersToolbar-dateTitleContainer .MuiTypography-root': {
      fontSize: '1.5rem'
    },
    'div[role=presentation]:first-of-type': {
      display: 'flex',
      '& .PrivatePickersFadeTransitionGroup-root:first-of-type': {
        order: 2
      },
      '& .PrivatePickersFadeTransitionGroup-root:nth-of-type(2)': {
        order: 1,
        '& > div::after': {
          content: '"年"'
        }
      },
      '& .MuiButtonBase-root': {
        order: 3
      }
    }
  }
}

import { Stack, Button, FormControlLabel, Checkbox, FormControl, FormGroup, FormHelperText } from '@mui/material'
import { useForm, SubmitHandler, Controller } from 'react-hook-form'
+ import { yupResolver } from '@hookform/resolvers/yup'
+ import * as yup from 'yup'

- // type Inputs = {
- //   checks: boolean[]
- //   checkerr: boolean
- // }

- // const validationRules = {
- //   checks: {
- //     validate: () => {
- //       clearErrors(`checkerr`)
- //       const checks = [getValues(`checks.${0}`), getValues(`checks.${1}`), getValues(`checks.${2}`)]
- //       if (checks.filter((v) => v === true).length < 2) {
- //         setError(`checkerr`, { message: 'いずれか2つ選択してください。' })
- //       }
- //       return true
- //     }
- //   }
- // }

+ const schema = yup.object({
+   checks: yup.array().of(yup.boolean().required()).required(),
+   checkerr: yup.boolean().required().test('checklength', 'いずれか2つ選択してください。', function() {
+      return this.parent.checks.filter((v:boolean) => v === true).length >= 2 
+   })
+ })

+ type Inputs = yup.InferType<typeof schema>


export function InputReactHookCheckBox() {
  const {
    control,
    handleSubmit,
    formState: { errors }
-    // getValues,
-    // clearErrors,
-    // setError
  } = useForm<Inputs>({
    defaultValues: {
      checks: [false, true, false],
      checkerr: false
    },
+    resolver: yupResolver(schema)
  })

  const onSubmit: SubmitHandler<Inputs> = (data: Inputs) => {
    console.log(`submit: checks[0]=${data.checks[0]} checks[1]=${data.checks[1]} checks[2]=${data.checks[2]} typeof: ${typeof data.checks}`)
  }

  return (
    <Stack component="form" noValidate onSubmit={handleSubmit(onSubmit)} spacing={2} sx={{ m: 2, width: '25ch' }}>
      <FormControl fullWidth error={errors.checkerr !== undefined}>
        <span>いずれか2つ選択。</span>
        <FormGroup>
          <Controller
            name={`checks.${0}`}
            control={control}
-            // rules={validationRules.checks}
            render={({ field }) => (
              <FormControlLabel label="チェック 1" control={<Checkbox {...field} checked={field.value} />} />
            )}
          />

          <Controller
            name={`checks.${1}`}
            control={control}
            // rules={validationRules.checks}
            render={({ field }) => (
              <FormControlLabel label="チェック 2" control={<Checkbox {...field} checked={field.value} />} />
            )}
          />

          <Controller
            name={`checks.${2}`}
            control={control}
            // rules={validationRules.checks}
            render={({ field }) => (
              <FormControlLabel label="チェック 3" control={<Checkbox {...field} checked={field.value} />} />
            )}
          />
        </FormGroup>
        <FormHelperText>{errors.checkerr?.message}</FormHelperText>
      </FormControl>

      <Button variant="contained" type="submit">
        送信する
      </Button>
    </Stack>
  )
}

import { Stack, Button, FormControlLabel, Checkbox, FormControl, FormGroup, FormHelperText } from '@mui/material'
import { useForm, SubmitHandler, Controller } from 'react-hook-form'
+ import { zodResolver } from '@hookform/resolvers/zod'
+ import { z } from "zod"

- // type Inputs = {
- //   checks: boolean[]
- //   checkerr: boolean
- // }

- // const validationRules = {
- //   checks: {
- //     validate: () => {
- //       clearErrors(`checkerr`)
- //       const checks = [getValues(`checks.${0}`), getValues(`checks.${1}`), getValues(`checks.${2}`)]
- //       if (checks.filter((v) => v === true).length < 2) {
- //         setError(`checkerr`, { message: 'いずれか2つ選択してください。' })
- //       }
- //       return true
- //     }
- //   }
- // }

+ const schema = z.object({
+   checks: z.array(z.boolean()),
+   checkerr: z.boolean()
+ })
+ .refine(data => data.checks.filter((v) => v === true).length >= 2, {
+     message: 'いずれか2つ選択してください。',
+     path: ['checkerr'], 
+   })

+ type Inputs = z.infer<typeof schema>


export function InputReactHookCheckBox() {
  const {
    control,
    handleSubmit,
    formState: { errors }
-    // getValues,
-    // clearErrors,
-    // setError
  } = useForm<Inputs>({
    defaultValues: {
      checks: [false, true, false],
      checkerr: false
    },
+    resolver: zodResolver(schema)
  })

  const onSubmit: SubmitHandler<Inputs> = (data: Inputs) => {
    console.log(`submit: checks[0]=${data.checks[0]} checks[1]=${data.checks[1]} checks[2]=${data.checks[2]} typeof: ${typeof data.checks}`)
  }

  return (
    <Stack component="form" noValidate onSubmit={handleSubmit(onSubmit)} spacing={2} sx={{ m: 2, width: '25ch' }}>
      <FormControl fullWidth error={errors.checkerr !== undefined}>
        <span>いずれか2つ選択。</span>
        <FormGroup>
          <Controller
            name={`checks.${0}`}
            control={control}
-            // rules={validationRules.checks}
            render={({ field }) => (
              <FormControlLabel label="チェック 1" control={<Checkbox {...field} checked={field.value} />} />
            )}
          />

          <Controller
            name={`checks.${1}`}
            control={control}
            // rules={validationRules.checks}
            render={({ field }) => (
              <FormControlLabel label="チェック 2" control={<Checkbox {...field} checked={field.value} />} />
            )}
          />

          <Controller
            name={`checks.${2}`}
            control={control}
            // rules={validationRules.checks}
            render={({ field }) => (
              <FormControlLabel label="チェック 3" control={<Checkbox {...field} checked={field.value} />} />
            )}
          />
        </FormGroup>
        <FormHelperText>{errors.checkerr?.message}</FormHelperText>
      </FormControl>

      <Button variant="contained" type="submit">
        送信する
      </Button>
    </Stack>
  )
}