[Vuejs]-Vee-validate model-less validation on submit not working

0👍

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>

-1👍

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

Leave a comment