Vee-validate: Cant validate checkboxes, radio buttons

[tfdbloom]

Versions

• vee-validate: 3.0.3
• vue: 2.6.10

Describe the bug
I can't validate checkboxes or radio buttons. I been looking in the documentation and only found some description about radio button group. I'm more after a solution where I got my own components. Could you look at my example and check why it does not work, I should add that the radio button example does not work (that is copy paste for your documentation)? Please let me know if I should update the question with any more information.

Just a note, it would be nice if there was more working examples of things like validation of dropdown, radio buttons and checkboxes.

To reproduce
Steps to reproduce the behavior:

1. click on submit

Expected behavior
It should validate the checkbox when it's not checked as it is required.

Demo link
Codesandbox.

[logaretm]

I will add more examples for all the input types in the documentation.

Your custom checkbox is not working because checkboxes generally have some caveats, for example, the native checkbox with Vue.js doesn't work like yours.

There are two properties with checkboxes, the checked property, and the value property. When the box is checked it emits the value, when it is not. Well, this is the caveat.

By default when its unchecked it emits "false" or removes the item from the array depending on the v-model binding type. So your button would need to maintain two states, some frameworks even do a true-value and false-value to better give control over the unchecked behavior.

Furthermore, vee-validate considers false a valid value, so you might need to use null instead. or you could configure the required rule by using the object notation and pass allowFalse: false to it so it would consider false as an invalid value.

this is why the last group for radio buttons is also passing the validation initially because they are bound to false, starting with null fixes it.

I have updated your example here:

https://codesandbox.io/s/vue-template-8lmt4

I'm aware the docs failed to mention this, which will be addressed.