v4 Why doesn't validateOnValueUpdate work with schemas and how do I disable @change validation then?

[e1uone]

o/

I just want them to be validated by @blur please help 😞

"validateOnValueUpdate: false" worked before I implemented the scheme, but now it doesn't.

Template code.

            <q-input
              v-if="loginType == `login`"
              class="col-12"
              name="login"
              autocomplete="false"
              :error="!!errors.login"
              :error-message="errors.login"
              v-model="login"
              :label="$t('loginPage.loginField')"
            />
            <q-input
              v-else
              class="col-12"
              name="phone"
              v-model="phone"
              :error-message="errors.phone"
              :error="!!errors.phone"
              :label="$t('loginPage.phoneField')"
            />
            <q-input
              class="col-12"
              name="password"
              type="password"
              autocomplete="false"
              :error-message="errors.password"
              :error="!!errors.password"
              v-model="password"
              :label="$t('loginPage.passwordField')"
            />

js code:

    const validationSchema = computed(() => {
      let rules = { password: "required" };
      if (loginType.value == "login") {
        rules.login = "required|email";
      } else {
        rules.phone = "required";
      }
      return rules;
    });
    const { form, handleSubmit, resetForm, errors } = useForm({
      validationSchema
    });

    const { value: login, handleChange } = useField("login", {
      form,
      validateOnValueUpdate: false
    });
    const { value: password } = useField("password", {
      form,
      validateOnValueUpdate: false
    });
    const { value: phone } = useField("phone", {
      form,
      validateOnValueUpdate: false
    });

According to the documentation, I also tried to use handleChange to prevent validation by @change, but q-input does not have such an event, so I tried to hang it on @update: model-value. And it's not working 😭

    const validationListeners = {
      blur: handleChange,
      "update:model-value": (e) => handleChange(e, false)
    };

[paulorodrigues-mb]

Same question here, can´t change the validation behavior at all

[daniel-hyun-chae]

In another post, the creator said validateOnValueUpdate doesn’t prevent validation as it should keep the valid flag up-to-date. Instead, it simply prevents setting error messages.

I don’t understand this argument because the fact that we want to control the trigger point for validation is exactly to control when the valid flag is to be updated.

Having asynchronous validation is very expensive and cannot be prevented firing too often unfortunately.

[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
}`