vee-validate file required validation onSubmit not working-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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>