Multiple Text Field Repeater with VueJS Vee Validate

Question

I have a multiple text fields repeater with veevalidate. The problem is that, when the first field has errors, the other field will be affected. And, will inherit that error when adding new field.

-> https://prnt.sc/h75byu

here's my html

<div id="app">
  <form class="ui form" @submit.prevent="onSubmit">

    <div class="repeater" v-for="(field, index) in fieldsRepeater">
      <div class="field" :class="{error: errors.has('fname')}">
        <label>First Name</label>
        <input type="text" name="fname" placeholder="First name" v-validate="'required'" v-model="fname">
        <span class="error" v-if="errors.has('fname')">{{errors.first('fname')}}</span>
      </div>

      <div class="field" :class="{error: errors.has('lname')}">
        <label>Last Name</label>
        <input type="text" name="lname" placeholder="Last name" v-validate="'required'" v-model="lname">
        <span class="error" v-if="errors.has('lname')">{{errors.first('lname')}}</span>
      </div>

    </div>
  <button type="button" class="ui button" @click="AddField">Add Field</button>

  <button type="submit" class="ui submit button">Submit</button>
  </form>
</div>

here's my vuejs

Vue.use(VeeValidate)

new Vue({
  el: '#app',
  data() {
    return {
      fieldsRepeater: [{
        fname: '',
        lname: '',
      }],
    }
  },
  methods: {
    AddField() {
      this.fieldsRepeater.push({
        fname: '',
        lname: '',
      });
    },
    onSubmit() {
      this.$validator.validateAll()

      if (!this.errors.any()) {
        alert('submit')
      }
    }
  }
})

here's my jsfiddle -> https://jsfiddle.net/m67d8f4x/66/

how can we apply different validation to every group of fields?

How can I solve that problem?

Daniel · Accepted Answer · 2017-11-07 03:39:12Z

5

your names are the same, so the veeValidate plugin can't tell them apart.

try the following code. Note that the names are dynamically added using :name="'fname'+index" and refernced using errors.has('lname'+index)

<div id="app">
  <form class="ui form" @submit.prevent="onSubmit">

    <div class="repeater" v-for="(field, index) in fieldsRepeater" :key="index">
      <div class="field" :class="{error: errors.has('fname'+index)}">
        <label>First Name</label>
        <input type="text" :name="'fname'+index" placeholder="First name" v-validate="'required'" v-model="field.fname">
        <span class="error" v-if="errors.has('fname'+index)">{{errors.first('fname'+index)}}</span>
      </div>

      <div class="field" :class="{error: errors.has('lname'+index)}">
        <label>Last Name</label>
        <input type="text" :name="'lname'+index" placeholder="Last name" v-validate="'required'" v-model="field.lname">
        <span class="error" v-if="errors.has('lname'+index)">{{errors.first('lname'+index)}}</span>
      </div>

    </div>
  <button type="button" class="ui button" @click="AddField">Add Field</button>

  <button type="submit" class="ui submit button">Submit</button>
  </form>
</div>

also, you should get into the habit of ALWAYS defining a key

fiddle: https://jsfiddle.net/m67d8f4x/67/

answered Nov 7, 2017 at 3:39

Daniel

35.9k17 gold badges115 silver badges163 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Codeblooded Saiyan Over a year ago

yeah, that's what i'm trying to do. i tried fname[index] but doesn't work. Glad' that you answered my question. Thank you.

Collectives™ on Stack Overflow

Multiple Text Field Repeater with VueJS Vee Validate

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related