vee-validate does not work properly when use checkbox with v-model

[farazshuja]

Versions:

• VueJs: 2.1.10
• Vee-Validate: 2.0.0.beta.22

Description:

vee-validate does not show error when its used with a checkbox on which v-model is applied, check the jsfiddle here: https://jsfiddle.net/75a5mc3c/132/

It works i.e. show error if either you remove the v-model or change type to text.

[logaretm]

Okay, a small change was introduced with the fix, for checkboxes, required will consider false an empty value in other words an invalid value. however that is only for checkboxes. other field types consider false as a valid value.

should be up in the next release.

[alqu]

Even if I use vee-validate for tracking the status of the checkbox, the dirty flag is never set:

<label class="checkbox">
  <input type="checkbox"
    v-model="item.enabled"
    name="enabled"
    v-validate="''"> Active
</label>

With this, I trick vee-validate to monitor this checkbox, even if there is no validation rule in it.

...so initially I see this when the form has been loaded and the checkbox is not checked:

After checking the box, it looks like this:

So vee-validate still thinks it is
a) "pristine", but
b) "touched"
And the "dirty" flag is not set at all.

If I try to check my forms (changed, unchanged), then this does not work with checkboxes.

Strange.

[escapedcat]

@alqu @logaretm I don't think this is fixed yet. Please have a look at this fiddle:
https://jsfiddle.net/escapedcat/9yubos15/
Let me know if my approach is wrong or I missed something.

As far as I understood the history of the checkbox changes it went from

• use false
• use null https://github.com/baianat/vee-validate/issues/593#issuecomment-310592349
• to it's ok to use false again https://github.com/baianat/vee-validate/issues/613#issuecomment-312967074

But it looks like with master it's not working at the moment.
Can you confirm? I'm getting crazy 😕 😵

[logaretm]

@escapedcat It is currently broken with master since the merge of #616 I'm currently working on a fix. Also it does not work for custom components, as the validator does not know then if your component behave as a checkbox or not. I will try to think of something simple for it.

[escapedcat]

Thx a lot for the info! We created a workaround for now. In general vee-validate is really awesome! Thx a lot for your work!

[GanchoDanailov]

Is this fixed?

[logaretm]

@GanchoDanailov it is fixed, but requires your checkboxes to have the same model. Eg. Binding them to an array. But binding them to different models will break validation.

Checkout validation components introduced in 2.1.0

[chriszrc]

Is it fixed for custom components? I'm using bootstrap-vue for the my form components, and veevalidate has worked with everything so far, but not checkboxes

[RandomPiche]

Same here with the vue-js-toggle-button plugin, I opened an issue here euvl/vue-js-toggle-button#98

[krogla]

@chriszrc just use v-validate="'required:true'" docs

[wernerru]

just use v-validate="'required:true'" docs

Not sure how I didn't notice that earlier, but this was the only solution when using Vuetify and v-checkbox with v-model set

[blackinitial]

@chriszrc just use v-validate="'required:true'" docs

thanks for the solution. its work on custom checkbox component