V4.2.6 validateOnValueUpdate is not working

[IspeakIT]

The property is not working:
if set to TRUE, the rule will be executed with new value
If set to FALSE; the rule will also executed but with old value.

How to prevent execution of the rule on value change??? With this Flag not possible!!

My Code:
Have created a custom field.
Here also the Watcher to update the 'Veevalidate Field'

const rule = (val: any) => {
console.log('TEST Validation', val);
return false;
}

const vField = useField('test', rule, {
initialValue: props.modelValue,
validateOnValueUpdate: false
})

watch(() => props[modelValue], () => {
if (vField .value.value != props.modelValue) {
vField .value.value = props.modelValue;
}
});

[logaretm]

It's intended. The validation will always run silently regardless of what setting you have when the value changes. This is to keep the valid flag in sync.

The validateOnValueUpdate only controls when error messages are generated.

[IspeakIT]

OK and how to prevent the validation on changes?

[daniel-hyun-chae]

In my current organization, we defined the following simple workaround for this issue.

By default, vee-validate runs validation whenever the value ref changes whether it was bound by a v-model or changed in the code.

It can be disabled by passing a validateOnValueUpdate option set to false. (https://vee-validate.logaretm.com/v4/guide/composition-api/custom-inputs/#validating-with-functions)

const { value } = useField('fieldName', yup.string().required(), { validateOnValueUpdate: false, });

However, this configuration does not work as expected. Even when validateOnValueUpdate is set to 'false', validation always runs silently and valid flag is updated. The above mentioned configuration only prevents error message from being set after the validation is run.
(See the related discussion https://github.com/logaretm/vee-validate/discussions/3587, https://github.com/logaretm/vee-validate/discussions/3542). 

This is problematic is a few ways:

In Asynchronous validation scenarios (that field validation is done asynchronously by backend e.g. equipment id field), asynchronous validation is continuously running silently on every single value change.
The timing of valid flag update does not match to the intended validation trigger in the application (e.g. we want to run field validation only when user press 'tab' but valid flag is already updated before hitting the tab as validation runs silently on every input change).

To overcome this limitation, it's recommended to introduce an additional ref to determine if validation is triggered by intended validation trigger or silently.
const isRealValidation= ref(false);

If the intended validation trigger is onBlur event, it is expected to set the ref to 'true' to inform validator to recognize this as real validation trigger.
@blur=" (e: Event) => {        isRealValidation= true; // informs the validator to recognize this validation as real validation not silent validation fieldHandleChange(e, true); // this line triggers the field validation on blur } "

Validation function is expected to check first of all whether the current validation cycle is the real validation or silent validation.

If it is realValidation, it sets the ref back to 'false' and runs the validation.

If it is not the real validation, it return false. This effectively keeps the valid flag to 'false' for all silent validations. As silent validation does not set error messages, this works perfectly fine.

`async function fieldValidator(value: string) {
// If validation runs silently by veevalidate, it should be always invalid
if (!isRealValidation.value) {
return false;
}
 isRealValidation.value = false;

//Validation logic to come here
}`

[robuedi]

i find this validation package a big mess and a huge disappointed for Vue, that even so there aren't any other alternatives

[akumanara]

Go ahead and write your own then.