Zodで初期値のないラジオボタンを作ると、サブミット時にエラーメッセージが `Expected string, received null` となる
zod で次のようなバリデーションを作成したとき、
z.string().min(1, { message: "オプションの有無を選択してください" });
フォームで初期値のないラジオボタンを置くと、
<input type="radio" id="extra_option_yes" name="extra_option" value="yes" /><label htmlFor="extra_option_yes">あり</label><input type="radio" id="extra_option_no" name="extra_option" value="no" /><label htmlFor="extra_option_no">なし</label>
サブミット時に表示されるエラーが「オプションの有無を選択してください」ではなく “Expected string, received null” となってしまう。
回避方法 1
optional()
をつけて、エラーメッセージをinvalid_type_error
にする
z.string({ invalid_type_error: "オプションの有無を選択してください",}).optional();
回避策 2
FieldArray を使っていると回避策 1 が動かないことがある、その場合nullish()
をつけてrefine()
でエラーメッセージを設定する
z.string().nullish().refine((v) => !!v, { message: 'オプションの有無を選択してください' }),