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