requiredのとき、値がfalseでもvalidateの結果が、trueになってしまう。
事象:お問い合わせフォームの「チェックボックス」
input(
type="checkbox",
data-vv-name="bool",
v-validate="'required'",
)
validator.validate('bool', true).then((result) => {
console.log(result)
});
--> true
validator.validate('bool', false).then((result) => {
console.log(result)
});
--> true
値がtrueでもfalseでもバリデーションが通ってしまう。
チェックボックスの正しい動作として、チェックがついていなければ、エラーになって欲しい。
でも、このままだとエラーにはならない。
調べました。
「vee-validate boolean」
解決したIssuesが出てきましたよ。
https://github.com/baianat/vee-validate/issues/484
あれ?修正してくれてますやん!
なんで動かないの?バージョンも最新にしたのに。。。
ソース見に行くか・・・
requiredルールのソース
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'", // <-- ここ
)
はい!正しく動いてくれました!
vee-validateのドキュメントはたまに古いことがあるので、あれ?ってなったらソース見に行くのがいいですね。
とても見やすいソースになっているので、すぐに原因を見つけることができると想いますよ。