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

3
votes

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

This is my form I'm going to validate.

enter image description here

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?

4
validationvue.jsvuejs2vee-validate

4 Answers

6
votes

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

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

1
votes

try it , in your code put this:

this.$validator.validateAll('nameForm.*').then((result) => {
  enter code hereif (result) {
  // pass
}
// alert("Correct them errors!");

}

this would validate all form

0
votes

To validate only two fields, you can use the attribute data-vv-scope="university" in these inputs, then:

this.$validator.validate("university").then((isValid) => {
      if (isValid) {
        ...             
      }
})

If you want to validate all fields of all scopes at the same time:

this.$validator.validateScopes().then((isValid) => {
      if (isValid) {
        ...             
      }
})