Vee validate version x3 with Netlify forms

Question

I have a simple working form where I make the submit with Netlify forms. Netlify forms are pretty straight forward where you just need to add

name="contact" data-netlify="true" method="POST" and Netlify does all the backend work

It looks something like this:

<template>
  <form ref="contact" name="contact" action="/success" 
  data-netlify="true" method="POST" @submit.prevent="submit()">
    <input type="text"  />
    <button type="submit"> Send </button>
  </form>
</template>

<script>
export default {
 methods: {
  submit() {
   this.$refs.contact.submit()
  },
 },
}
</script>

The above code is working as expected. Now I try to add the vee-validate plugin in my form where you need to add two components ValidationProvider, ValidationObserver. This is where I get errors. My code looks something like this now:

<template>
  <ValidationObserver ref="contact" tag="form" name="contact" action="/success" data-netlify="true" method="POST" @submit.prevent="submit()">
   <ValidationProvider rules="required" tag="div">
      <input type="text"  />
    </ValidationProvider>
    <button type="submit"> Send </button>
  </ValidationObserver>
</template>

<script>
import { ValidationProvider, ValidationObserver } from 'vee-validate'
export default {
  methods: {
    async submit() {
      const isValid = await this.$refs.contact.validate()
      if (!isValid) {
        return
      }

      this.$refs.contact.submit()
    },
  },
}
</script>

Notice that I use tag="form" where I render the component as form, since if I just wrap the form Netlify won't recognize the form. in my submit() I first run Validation and if that is positive then I submit the form as I did it before but I run to this error this.$refs.contact.submit is not a function. Interesting part is if I run document.querySelector('.form').submit() in my submit() function that works.

I think my submission is not good or maybe I maybe I'm doing all wrong.

Answer 1

I don't know anything about Netlify, but vee-validate requires you set a v-model on your input, or manage validation manually. My understanding is that it uses the v-model attribute to figure out what to track within the ValidationProvider. That's the item that it applies the rules (required) to, so I think you need this:

<template>
  <ValidationObserver ref="contact" tag="form" name="contact" action="/success" data-netlify="true" method="POST" @submit.prevent="submit()">
    <ValidationProvider rules="required" tag="div">
      <input type="text" v-model="myTextInput" />
    </ValidationProvider>
    <button type="submit"> Send </button>
  </ValidationObserver>
</template>

<script>
import { ValidationProvider, ValidationObserver } from 'vee-validate'
export default {
  data() {
     return {
        myTextInput:''
     };
  },
  methods: {
    async submit() {
      const isValid = await this.$refs.contact.validate()
      if (!isValid) {
        return
      }

      this.$refs.contact.submit()
    },
  },
}
</script>