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.