VeeValidateでcheckboxを必須項目としてバリデーションする方法
VeeValidateを使ってチェックボックスを必須項目としてバリデーションする場合以下のように書くかと思います。
input(
type="checkbox",
data-vv-name="bool",
v-validate="'required'",
)
予想される動作としては、チェックされていなければエラーを表示する。
しかし、実際にはエラーを表示してくれない。
なぜなのか。
checkboxでは値がfalseでもtrueでも、バリデーション結果はtrueになる
先程作成したチェックボックスでバリデーションの実験を行った。
validator.validate('bool', true).then((result) => {
console.log(result)
});
--> true
validator.validate('bool', false).then((result) => {
console.log(result)
});
--> true
値がtrueでもfalseでもバリデーション結果がtrueになってしまうのである。
チェックボックスの正しい動作として、チェックがついていなければ、エラーになって欲しい。
でも、このままだとエラーにはならない。
調べました。
「vee-validate boolean」で検索。
解決したissueが出てきました。
https://github.com/baianat/vee-validate/issues/484
あれ? 修正されてるみたい!
なんで動かないの?バージョンも最新にしたのに。。。
追記:どうやらv2.2.0での話であって、現在の仕様とは違うみたいです。
requiredルールのソース見てみました。
https://github.com/baianat/vee-validate/blob/master/src/rules/required.js
// incase a field considers `false` as an empty value like checkboxes.
if (value === false && invalidateFalse) {
return false;
}
ちゃんと用意してくれていました。
どうやらinvalidateFalse
を指定をしてあげればいいのですね^^
正しいチェックボックスの例
input(
type="checkbox",
data-vv-name="bool",
v-validate="'required:invalidateFalse'", // <-- ここ
)
はい!期待した通りに動作してくれました!
VeeValidateのドキュメントはたまに古いことがあるので、あれ?ってなったらソース見に行くのがいいですね。
とても見やすいソースになっているので、すぐに原因を見つけることができると想いますよ。