VeeValidateでcheckboxを必須項目としてバリデーションする方法
2019/03/26

VeeValidateを使ってチェックボックスを必須項目としてバリデーションする場合以下のように書くかと思います。

input(
  type="checkbox",
  data-vv-name="bool",
  v-validate="'required'",	
)

予想される動作としては、チェックされていなければエラーを表示する。

VeeValidate例

しかし、実際にはエラーを表示してくれない。

なぜなのか。

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期待する動作

はい!期待した通りに動作してくれました!

VeeValidateのドキュメントはたまに古いことがあるので、あれ?ってなったらソース見に行くのがいいですね。
とても見やすいソースになっているので、すぐに原因を見つけることができると想いますよ。