Vee-validate: Validate the input after submit, and not realtime

[simonvanbennekom]

Versions:

• VueJs: #.#.#
• Vee-Validate:

Description:

Hallo, im searching for this for hours but i cant find the answer.
I want to validate all fields on submit, and not realtime when im typing on the input field. I want to achieve something like this: http://vee-validate.logaretm.com/api.html#validator-example So when i click on the button then the it validate all the inputs and not when im typing

Can i achieve the above when i use input fields like this: <input v-model="first_name" v-validate="'required|alpha'" data-vv-as="First name" name="first_name" class="form-control input-sm" placeholder="First name" type="text">

Or do i have to do everything in javascript like the example in the link?

Steps To Reproduce:

[logaretm]

You can use data-vv-validate-on attribute to supply 'fake' events so it doesn't validate until you trigger validateAll

<input v-model="first_name" v-validate="'required|alpha'" data-vv-as="First name" name="first_name" class="form-control input-sm" placeholder="First name" type="text" data-vv-validate-on="none">

The next version will have a disabled modifier to prevent adding events:

<input v-model="first_name" v-validate.disabled="'required|alpha'" data-vv-as="First name" name="first_name" class="form-control input-sm" placeholder="First name" type="text">

[robbeman]

Question: has this been released? I don't find any documentation or examples on this (and it doesn't seem to work in my project, but I might be doing something else wrong).

Alternative approach:
Pause validation until the first form submission with

this.$validator.pause();

And on the submit event call resume, from this point on validation will become "real-time". (Which isn't bad, I guess, this way the users can fill in the form unobstructed and when they start fixing errors they see them disappear as soon as they are fixed.)

I call validatAll in the submit handlers anyway, so this was a small thing to add.

[logaretm]

You can disable listeners using the events config, just assign it to empty
string.

Vue.use(VeeValidate, { events: '' });

Or by using the disable modifier. Like this:
v-validate.disable='required'.

I will be sure to add it to docs as it's a common need.

[robbeman]

Thank you for the swift reply.

[megapctr]

I'm having the same issue. It seems the solution provided here is outdated, as the docs don't mention Vue.use(...).
How can I disable real-time validation in vee-validate v3?

[megapctr]

Nevermind, found the solution in the docs. This page was difficult to find through the search box, I found it when browsing Validation* component props

btw, I think it may be useful to have a combination of passive and aggressive :slightly_smiling_face: if I submit a form and there are errors, switch to aggressive validation

---

TL;DR for visitors from the future:

import { setInteractionMode } from 'vee-validate'
setInteractionMode('passive')