Validate array of inputs with Vee-Validate (Vuejs)

Question

The following works:

 <li :key="index" v-for="(...) in items">
    <input type="text" name="itemFields[]" v-validate="required">
 </li>

 // ...

<div class="vv-errors">
    <ul>
        // shows only for last active input
        <li v-for="error in errors.collect('itemFields[]')">{{ error }}</li>
    </ul>
</div>

If I make some input empty, it shows an error message. But if I then fill some other empty input with text, the error message disappears completely. That should not be the case, because the other input is still empty. To summarize, the error messages only consider the last active input.

How to achieve that the error message shows up if at least one of the inputs is empty?

Riddhi Riddhi · Accepted Answer · 2019-03-19T12:30:35

Actually the issue you are facing is because the name field is same for all your inputs and that should be unique. Hence while using v-for you could do something as below :

 <div  v-for="i in 5" >
   <input type="text" :name="'email'+i" placeholder="Email" v-validate="'required|email'">
   <span class="error" v-if="errors.has('email'+i)">{{errors.first('email'+i)}} 
   </span>
  </div>

Here is a basic example to solve your problem.

Validate array of inputs with Vee-Validate (Vuejs)

1 Answers