VueJS + VeeValidator + Multiple fields

You could apply a custom validator to a custom component that contained all the fields you want to validate together. For example, you could build a location component (using location instead of address because address is an HTML5 element, and you cannot name a Vue component the same as an existing HTML element).

Vue.component("location", {  props:["value"],  template: "#location-template",  data(){    return {      location: this.value    }  },  methods:{    update(){      this.$emit('input', Object.assign({}, this.location))    }  },})

Then you can build a validator for that component.

const locationValidator = {  currentLocation: null,  getMessage(field, args) {    if (!this.currentLocation.street)      return "Location requires a street";    if (!this.currentLocation.street_number)      return "Location requires a street_number";    if (!this.currentLocation.city)      return "Location requires a city";  },  validate(location, args) {    this.currentLocation = location;    if (!location.street || !location.street_number || !location.city)      return false;    return true  }};

Finally, you can pull that together in your Vue.

new Vue({  el:"#app",  data:{    loc: {}  },  created(){    this.$validator.extend("location", locationValidator)  }})

And your Vue template

<span v-show="errors.has('location')" style="color:red">{{ errors.first('location') }}</span><location v-validate="'location'" v-model="loc" data-vv-name="location"></location>

Here is an example.