Vue + Vee Validate 3 Trigger Manual Validation Vue + Vee Validate 3 Trigger Manual Validation vue.js vue.js

Vue + Vee Validate 3 Trigger Manual Validation


Adam pointed me in the right direction with the ValidationObserver.

This code works for me...

<ValidationObserver ref="observer" v-slot="{ invalid }" tag="form" @submit.prevent="submit()">  <ValidationProvider rules="required" v-slot="{ errors }">    <input type="text">    <p id="error">{{ errors[0] }}</p>  </ValidationProvider>  <button @click="submit()">Submit>/button></ValidationObserver><script>import { VslidationProvider, ValidationObserver } from 'vee-validate'import { required } from 'vee-validate/dist/rules'export default {  methods: {    async submit () {      const valid = await this.$refs.observer.validate()    }  }};</script>


New way of doing it

<ValidationObserver v-slot="{ handleSubmit }">  <ValidationProvider rules="required" v-slot="{ errors }">    <input type="text">    <p id="error">{{ errors[0] }}</p>  </ValidationProvider>  <button @click="handleSubmit(onSubmit)">Submit>/button></ValidationObserver><script>import { VslidationProvider, ValidationObserver } from 'vee-validate'export default {  methods: {    onSubmit() {      // ...    }  }};</script>