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>