React Hook Form,バリデーションzodを使用した場合、zodスキーマに記述した項目同士のチェック

はじめに

React Hook Form を使用し、バリデーションライブラリはzod という案件にて、zodスキーマに記述した項目同士のチェックが必要だったのでそのメモです。

私が探した時点（2022.12）では、日本語で解説してくれている記事を見つけることができなかったので、参考になれば嬉しいです。

やりたいこと

zodを使用して、zodスキーマに登録した項目同士のバリデーションチェックをしたい

例えば、パスワードチェック

最初の入力と確認用が同じかどうかチェックしたい

というシーンは良くあるのではないでしょうか？

結論

zodのrefineを使用します。

const passwordForm = z
  .object({
    password: z.string(),
    confirm: z.string(),
  })
  .refine((data) => data.password === data.confirm, {
    message: "パスワードとパスワード（確認）が異なっています。",
    path: ["confirm"],
  });

エラー文言出力はconfirmにエラーが入ってくるので、パスワードの方にもエラーメッセージを出す場合には、confirmとします。

 <div>
     <p>パスワード</p>
     <input type="password">
     <ErrorMessage message={errors.confirm?.message} />
 </div>
 <div>
     <p>パスワード確認</p>
     <input type="password">
     <ErrorMessage message={errors.confirm?.message} />
 </div>

参考

最後に

他にもzodで重複チェックをする方法も書いてますので、もし良ければ参考にしてみて下さい。
参考になれば嬉しいです。