Reputation: 7185
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?
Upvotes: 4
Views: 16514
Reputation: 11
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) { ... } })
Upvotes: 0
Reputation: 11
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
Upvotes: 1
Reputation: 87
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
Upvotes: 3
Reputation: 2134
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!");
}
Upvotes: 7