Vee-validate: Rules not removed when using v-for or v-if

[ralphbert]

I have the following template:

<fieldset v-for="partner in selections.partners">
  <input
      type="hidden"
      v-model="partner.age"
      name="Age of partner"
      v-validate
      data-rules="required"
      data-scope="form-2">
</fieldset>

If I add a partner-object into the array the validator validates the input as expected. But if I remove it the validator keeps validating the disappeared field. I can even reproduce this behaviour with the v-if directive.

Do I have to detach the validation manually in this case?

[logaretm]

It should clean them up if the directive is unbound, I will take a look.

[ralphbert]

I made an example for you:

1. increment the number of persons
2. make some errors (fill in names and remove them again)
3. submit the form
4. reduce number of persons

The errors will stay for the fields which are already gone.

Example:
JSFiddle

[hootlex]

Sometimes it doesn't attach validation rules when a form (hidden within a v-if) gets rendered.

[cupit]

Hey, there is still problem with this, when you use scopes in 2.0.0-rc.3 and vue 2.3.3.

I have simple div with select

<div v-if="productID == 2">
<div class="form-group" >
<select name="packageTypeID" v-validate="'required'">
</select>
</div>
</div>

when my productID changes the validatoion stays.
So far I use this.$validator.detach('packageTypeID', this.formID2); to work around this.

[nwrightau]

I'm having the same problem here, using Vue 2.3.3 and VeeValidate 2.0.0-rc.5

v-if still validates the field if it's not there at all, I tried the method above but it wouldn't detach. even tried not using a directive and attach/detach programatically but no luck.

In the end computed functions toggling the required class solved this for me but this is definitely still a problem as the v-if should've taken care of it.

[logaretm]

@nwrightau make sure you have key attribute set on your inputs, as Vue reuses them which prevents the directive from unbinding. v-if works fine some releases ago.

[nwrightau]

@logaretm thanks for the quick response! assuming you're referring to these just in case anyone else finds this thread later.

I don't have key attributes set on my inputs, will give it a go and report back - thanks again. Is the usage of key for requirement anywhere in the vee validate docs? I think conditional fields and therefore conditional validation is a common requirement for validation libraries, might be worth having a section on that and different methods for achieving it. Would be happy to weigh in on it if it's welcome.

[logaretm]

I think I should add it to the documentation via an additional example or so, it is very easy to miss.

[ezimnitskiy]

Hi, this does not work in the 2.0.0-rc.6, but works in 2.0.0-rc.5. Scope is not added if I use "v-if", but it works for "v-show" (in the 2.0.0-rc.6). Has something gone wrong or is it normal?
https://jsfiddle.net/oLtd0z1q/20/ - 2.0.0-rc.5
https://jsfiddle.net/oLtd0z1q/21/ - 2.0.0-rc.6

[logaretm]

@ezimnitskiy could be a bug, I will check and report back.

[logaretm]

@ezimnitskiy Yep, it is a bug caused by using the bind directive hook which was very early compared to inserted. Inserted was being used to attach the field but it turned out it isn't a guaranteed hook, so we used bind instead. But this brought the old issue back, because bind is too early for the input to detect its parent form, so it never set the scope correctly.

I will try to patch this ASAP.