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 · Accepted Answer · 2019-03-19 12:30:35Z

2

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.

answered Mar 19, 2019 at 12:30

Riddhi

2,2541 gold badge11 silver badges17 bronze badges

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

1 Comment

Alexandra Axt Over a year ago

Is there a way to show only one error message? E.g. if some of the 5 inputs are empty, show error message "Some of the inputs are emptry"

Collectives™ on Stack Overflow

Validate array of inputs with Vee-Validate (Vuejs)

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