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: 'オプションの有無を選択してください' }),