I have a problem with an application working on Vue2.js with vee-validation package.
Here is the link to the app : https://codepen.io/EnjoyMachine/pen/ogvbZgO
// find the code in the codepen link
As you can see, this app has 2 text fields and value are required in both. (validation made by vee-validate) The first text field is in the app and the second in a sub component.
Iy you click on "Save" button without fill anything, only the first field has a validation error.
What's wrong with the validation inside my component ? Is there something I forgot ?
Please don't tell me to use another library than vee-validate (I can't change)
The issue is with $validator.validateAll(), which only validates inputs registered to the validator. Since the child uses its own validator, its input is not validated when calling $validator.validateAll() on the parent.
There are several ways to fix it (see GitHub issue), but the easiest is to use the parent validator in the child by injecting it:
Vue.component('section-restriction', {
...,
inject: ['$validator'],
});
Check the updated Codepen.