Vue.js Vee Validate how to do a validation with in a scope of elements

Question

I'm using VeeValidate pluggin for the validation in my project.

This is my form I'm going to validate.

If I want to validate all fields at the save button

this.$validator.validateAll().then(result => {
    if (result) {

    }
    // alert("Correct them errors!");
}

This kind of function would help.

But what if I want to validate University and course at the add button. Instead of validate all is there a way to pass only that two field names (uni and cou) for the validate?

Answer 1

You can use data-vv-scope of vee-validate to achieve this functionality. Here is how it can be done

<input 
      id="university" 
      name="university" type="text"
      v-model="<model_of_university>"
      data-vv-rules="required" 
      data-vv-as="University"
      data-vv-scope="university" required/>

<input 
      id="course" 
      name="course" type="text"
      v-model="<model_of_course>"
      data-vv-rules="required" 
      data-vv-as="Course"
      data-vv-scope="university" required/>

Now, in oder to validate these fields just pass the data-vv-scope value in the validateAll method as following

this.$validator.validateAll('university').then((result) => {
 if (result) {

    }
    // alert("Correct them errors!");
}