React Hook Form + Zodでcheckboxのvalidationをする

Update 2023.08.18

literalのエラーメッセージのカスタムの仕方に変更があったようなので修正

Update 2023.02.06

1年経って、コンスタントにLikeいただいているので更新。
しかしチェックボックスのチェック必須はliteralを使用するで、変わっていないようです。

規約やプライバシーポリシーへの同意を求めるようなチェックボックスが必要になりました。
React Hook Form + Zodを利用してチェックを行っています。

それぞれ公式を見ましたがcheckboxのチェックがついていない場合にエラーを出すようなサンプルは見当たりませんでした。
唯一見つけたのはこちら
https://github.com/colinhacks/zod/issues/220

literalを使うと希望の形になるようです。

import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import * as z from 'zod'

const schema = z
  .object({
    email: z.string().email({ message: '不正なメールアドレスです' }),
    password: z
      .string()
      .nonempty({ message: 'パスワードを入力してください' })
      .regex(password, { message: '英数字8文字以上で入力してください' }),
    passwordConfirm: z
      .string()
      .nonempty({ message: '確認用パスワードを入力してください' }),
    agreePolicy: z.literal(true, {
      errorMap: () => ({ message: "同意してください" }),
    }),
  })
  .refine(data => data.password === data.passwordConfirm, {
    message: 'パスワードが一致しません',
    path: ['passwordConfirm'], // path of error
  })

メッセージの設定方法が
messageでもrequired_errorでもなくinvalid_type_errorです。
おまけでパスワードが一致していない時の書き方も。

どなたかの参考になれば。