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!");
}

Answer 2

You can tell the validator to scope the fields by adding a data-vv-scope. Those fields will be then identified using their name and their scope. You can have inputs with the same name in different scopes, and you can display, clear and validate those scopes independently.

For convenience, you may add the data-vv-scope attribute on the form that owns the inputs, you don't have to add the attribute on every input. You can also pass scope property to the validator expression.

<v-form  data-vv-scope="form1" >
                <v-text-field v-validate="'required|alpha_spaces'" type="text" name="username" data-vv-scope="form1"/>
                <span>{{ errors.first('form1.username') }}</span>

        </v-form>

        <v-form  data-vv-scope="form2" >
                <v-text-field v-validate="'required|alpha_spaces'" type="text" name="username" data-vv-scope="form1"/>
                <span>{{ errors.first('form2.username') }}</span>

        </v-form>

// click event, will validate the form1

  submit() {

        this.$validator.validateAll('form1').then(valid => {

                  if (valid) {


                  }
                   });
      }

Please refer to the following link: https://baianat.github.io/vee-validate/examples/scopes.html