Vue Js & v-validate – validating a list (collection) on client side

v-validate is one of the best validation plugins out there for Vue js, if you are looking to validate a list inside the form you can use below snippet.

                        <table class="table table-striped table-hover">
                          <thead>
                            <tr>
                              <th>Title</th>
                              <th>URL</th>
                              <th>Items</th>
                              <th class="text-center w-100px">Actions</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr v-for="item in MyList" :key="material.Id">
                              <td>
                                <input type="text" class="form-control" v-validate="'required'" :name="`material[${index}].Title`" v-model="item.Title">
                                <div class="text-danger" v-show="vErrors.has(`material[${index}].Title`)">Title required</div>
                              </td>
                              <td>
                                <input type="text" class="form-control" v-validate="'required'" :name="`material[${index}].LinkUrl`" v-model="item.LinkUrl">
                                <div class="text-danger" v-show="vErrors.has(`material[${index}].LinkUrl`)">Url required</div>
                              </td>
                              <td>
                                <select class="form-control"
                                  :name="`material[${index}].MaterialType`" 
                                  v-model="item.ReferenceMaterialType" v-validate="'required'" 
                                  v-bind:class="{ 'is-invalid': ReferenceMaterialLinks != 0 && vErrors.has(`material[${index}].MaterialType`) }">
                                    <option v-for="materialType in buildingAssetReferenceMaterialTypes"
                                      :value="materialType.BuildingAssetReferenceMaterialTypeId"
                                      :key="materialType.BuildingAssetReferenceMaterialTypeId">{{materialType.Name}}</option>
                                </select>
                                <div class="text-danger" v-show="vErrors.has(`material[${index}].MaterialType`)">Material type required</div>
                              </td>
                              <td class="text-center table-actions">
                                <a class="table-action hover-primary" target="_blank" :href="item.LinkUrl"><i class="ti-new-window"></i></a>     
                                <a class="table-action hover-danger" href="#" @click="onDeleteDocument($event, item.Id)"><i class="ti-trash"></i></a>
                              </td>
                            </tr>
                          </tbody>
                        </table>

Above snippet demonstrates how you can validate a simple text box vs a dropdown list. pretty easy hey!!!

the trick is :name=”`any-array[${index}].MyProperty`” (material[${index}].Title), you need to have an array and index is already part of the v-for.