Vee-validate: Dynamic form validation

[AlphaB]

Hi! I can't figure out how to configure validator for dynamic form like this one https://jsfiddle.net/92Lmjs6m/

[logaretm]

I'm not sure about the issue, The fiddle didn't include the plugin and you didn't install it, I updated the fiddle https://jsfiddle.net/92Lmjs6m/1/

Let me know if that was the issue or something else doesn't work properly.

[AlphaB]

Sorry, seems like I forgot to save changes, here is updated fiddle https://jsfiddle.net/92Lmjs6m/9/
In my form I have 1 select and 2 inputs. Input visibility is bounded to selected value. When I select Option1 I will get proper validation error. But if then I change selected value to Option2 I wouldn't get any validation error.

[logaretm]

Well that is weird it seems whatever input that gets displayed first gets to be validated, the other doesn't.

I will look more into it tomorrow, I think I have a workaround in mind. Thanks for the feedback.

[AlphaB]

Thanks! Hope this will help.

[roelvan]

I am having similar issues with dynamic forms:

     <div class="field" v-for="(name, n) in players">
        <label>Player {{ n+1 }}</label>
        <div class="ui input" :class="{ 'right action': n>0 }">
          <input type="text"
                 :name="'player-' + (n+1) + '-name'"
                 v-model="players[n]"
                 v-validate data-vv-rules="required"
                 v-bind:placeholder="'Name of player ' + (n+1)">
          <div class="ui icon red button" @click="removePlayer(n)" v-if="n>0">
            <i class="trash large icon"></i>
          </div>
        </div>
      </div>

This is what I see when I try out my code: https://goo.gl/GDgLQ4
Removing v-validate data-vv-rules="required" gets rid of this issue.

[logaretm]

I figured the issue, I was looking into the plugin but I forgot that Vue.js 2.0 actually reuses similar input elements instead of unbinding and binding them. It escaped my mind because I rarely needed to switch inputs.

https://vuejs.org/v2/guide/conditional.html#Controlling-Reusable-Elements-with-key

so to fix it, just add unique key attribute to your inputs here is an updated example:

https://jsfiddle.net/92Lmjs6m/17/

[cjz9032]

@logaretm move to this issue
there still something wrong,u could try this
mult-form-demo

To reproduce the error:
1.click 2nd form's plus-btn
2.click the minus-btn
3.input name,age,then submit will alert(error)