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. ```js 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.

[ffigiel]

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?

[ffigiel]

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 🙂 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')

[Leon-MK]

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 🙂 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')

https://vee-validate.logaretm.com/v3/guide/interaction-and-ux.html new link for v3

[MachariaK]

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 🙂 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')

Can we do this globally for Vue 3?

[vecter]

It seems that Passive mode was removed in v4. Why is that? It's useful to only validate on form submission, as opposed to every time they leave an input field.

[JoJk0]

Any plan to reintroduce this / motivation why it was removed? Any workarounds possible?

[zainkhalid93]

Any plan to reintroduce this / motivation why it was removed? Any workarounds possible?

By default vee-validate adds multiple event listeners to your fields, you can turn off by setting false in config.

import { configure } from 'vee-validate';
configure({
validateOnBlur: false, // controls if blur events should trigger validation with handleChange handler
validateOnChange: false, // controls if change events should trigger validation with handleChange handler
validateOnInput: false, // controls if input events should trigger validation with handleChange handler
validateOnModelUpdate: false, // controls if update:modelValue events should trigger validation with handleChange handler
});

this works with vue3 vee-validate 4.

[lanaschuster]

Any plan to reintroduce this / motivation why it was removed? Any workarounds possible?

By default vee-validate adds multiple event listeners to your fields, you can turn off by setting false in config.

import { configure } from 'vee-validate'; configure({ validateOnBlur: false, // controls if blur events should trigger validation with handleChange handler validateOnChange: false, // controls if change events should trigger validation with handleChange handler validateOnInput: false, // controls if input events should trigger validation with handleChange handler validateOnModelUpdate: false, // controls if update:modelValue events should trigger validation with handleChange handler });

this works with vue3 vee-validate 4.

The configure function only works with Field component. Don't work with useField (composition API): https://vee-validate.logaretm.com/v4/guide/components/validation/#validation-behavior

I found an example for compositionApi, but I couldn't make it work yet: https://vee-validate.logaretm.com/v4/examples/dynamic-validation-triggers/

Another thing I found is defineField function returned by useForm, but in the app I am working is running vue 3.2 :(
https://vee-validate.logaretm.com/v4/api/use-form#composable-api