【React Hook Form】カスタマイズしたバリデーションが適用されない問題

はじめに

zodでスキーマを作り、バリデーションを定義していたが、なぜか必須項目のエラー時に「Required」が表示されていた。

問題を解決した際の備忘録として。

結論

defaultValuesを設定したことで、React Hook Form（RHF）が全フィールドを正しく認識できるようになり、Zodのバリデーションエラーも正しく処理されるようになった。

背景と理由

背景

• defaultValuesを使っていなかった時、RHFは「どのフィールドがあるか」を完全に把握できていなかった
• 特に、ネスト構造（例：XXXX[0].YYYY） のフィールドは、Mui materialのControllerを使っても、RHFの内部状態であるformState.errorsが未初期化になることがある

理由

• RHF は「このフィールド、エラーがあるか分からん…」状態になる
• zodResolverがエラーを返していても、それをフィールドにバインドできなかった

解決策

defaultValuesを指定したことで、下記が実現した。

• フォームの全てのフィールドの構造が事前に明示された
• RHFは「どのフィールドが存在して、どんな初期値か」をちゃんと把握できるようになった

そのため、Zodのバリデーション結果とフィールドが結びつき、formState.errorsが正確になり、エラーメッセージも表示されるようになった。