vee-validate model-less validation on submit not working - vue.js

Question

this seems to be simple one but I can not get it work...
I want to validate if file is set only when I click the validate button. but the validation result in check method always return false.
<template>
<ValidationObserver>
<form #submit.prevent>
<ValidationProvider
ref="aProvider"
name="file"
rules="required"
v-slot="{ errors }"
>
<input type="file" />
<p>{{ errors[0] }}</p>
</ValidationProvider>
<button #click="check">validate!</button>
</form>
</ValidationObserver>
</template>
<script>
export default {
methods: {
async check() {
const { valid } = await this.$refs.aProvider.validate();
if (valid) {
alert("Form has been submitted!");
}
},
},
};
</script>
codesandbox https://codesandbox.io/s/codesandbox-forked-6o7iyt?file=/src/Demo.vue

Answer 1

The validate() method is for Observers, not for providers as specified in docs: https://vee-validate.logaretm.com/v2/guide/components/validation-observer.html#methods
Just set a ref on your Observer and run the method.
<template>
<ValidationObserver ref="form">
<form #submit.prevent>
<ValidationProvider
name="file"
rules="required"
v-slot="{ errors }"
>
<input type="file" />
<p>{{ errors[0] }}</p>
</ValidationProvider>
<button #click="check">validate!</button>
</form>
</ValidationObserver>
</template>
<script>
export default {
methods: {
async check() {
const { valid } = await this.$refs.form.validate();
if (valid) {
alert("Form has been submitted!");
}
},
},
};
</script>

Answer 2

Create a data property and bind it to the input via v-model. Move your ref to the ValidationObserver. Then it will validate properly.