【VeeValidate】check boxのバリデーション

2022年10月15日

限定的な内容ですが VeeValidate (Nuxt3にて) で check box のバリデーションを実装しようとした際に少々詰まったので記録しておきます。

Filed コンポーネントの利用 (text)

通常 input の type=’text’ の場合以下のように VeeValidate の Filed コンポーネントを使用してバリデーションができる input を作成できます。

rules の設定については今回は割愛しますがそこに諸々バリデーションルールの追加が可能です。input 内容は v-model でバインディングできます。

   <Field
      type="text"
      :name="name"
      :id="id"
      v-model="target"
      :label="'テスト'"
      :rules="{}"
    />


// --- 省略 ---
 import { Field } from 'vee-validate';

checkbox の場合

しかし同様に type=’checkbox’ の際も boolean の変数を v-model でバインディングすれば問題なくバリデーションできると思っていたのですがうまく動きませんでした。。

原因としては入力値の値がundifinedになっていることが原因らしく結論から行くと以下の様にチェック状態と、非チェック状態を明示的に指定する必要があった様です。

   <Field
      type="checkbox"
      :name="name"
      :id="id"
      :value="true"
      :unchecked-value="false"
      v-model="target"
      :label="'テスト'"
      :rules="{}"
    />

:value がチェックされている時の値、:unchecked-value が非チェックの時の値という事でpropsを渡しています。

詳細はこちらに issue としてありましたが今回日本語の記事もなかったので備忘録として残しておきます。