I'm experiencing an issue with validation using vee-validate and Vuetify:
I have two forms with different scopes, both being submitted within one function. While the validation is functioning correctly upon submission, the input errors are not displaying on the UI:
The inputs belong to different scopes:
<v-text-field
id="PersonalName"
v-model="PersonalName"
label="Name"
:error-messages="errors.collect('Name')"
v-validate="'required|alpha_spaces'"
data-vv-name="Name"
data-vv-scope="scopePersonal"
prepend-icon="face"
></v-text-field>
and
<v-text-field
id="DeliveryAddressLine"
v-model="DeliveryAddressLine"
prepend-icon="home"
v-validate="'required'"
label="Delivery Address"
data-vv-name="deliveryaddres"
:error-messages="errors.collect('deliveryaddres')"
data-vv-scope="shippingAddress"
>
</v-text-field>
Here is the function within methods:
async personalDetails () {
var isPersonalDetails = false
await this.$validator.validate('scopePersonal.*').then((isValid) => {
if (isValid) {
// do something
isPersonalDetails = true
} else {
console.log('error on personal details')
}
})
if (this.isDeliveryAddress) {
await this.$validator.validate('shippingAddress.*').then((isValid) => {
if (isValid) {
// do something
isPersonalDetails = true
} else {
isPersonalDetails = false
}
})
}
// move to next step - Vuetify
if (isPersonalDetails) { this.residentialOrder = 6 }
},
Validation is working as expected and progresses to the next step when inputs are valid (e.g. alpha_text without numbers), but the error messages are not shown on the inputs themselves.
Any suggestions on how to resolve this issue?