[Vuejs]-Vee validate version x3 with Netlify forms

by

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>
👤Ryley

Leave a comment