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

[udrzbarik]

Hey, I had a similar issue, I'm not sure if it's your case, but basically, all I had to do to make this work was to add a second null argument to the useField() it still mantained the schema validation from the useForm() apparently.

// CustomInput.vue
useField(() => props.name, null , { validateOnValueUpdate: false })

// CustomForm.vue
const { values } = useForm({
  validationSchema: props.validation
});

[olivierbourdeau]

@logaretm Hi, I am having the same issues as these gentleman. I set the validate-on-change flag to false to avoid an API call being made on every keystroke, but the silent validation still runs in the background.

You say that it is intended behaviour, that this is meant to keep the valid flag in sync. I understand your point and I agree with your reasoning, but would it be possible to add an option to disable the silent validation to reduce API calls?

Or maybe, instead of running the silent validation for every data change to keep the valid flag in sync, you could run silent validation solely when the valid flag is accessed (running the silent validation inside of the valid flag's getter)? I am not an expert at all, but I think that running the validation when the valid flag is accessed, instead of on every data change, would greatly reduce the number of time the validation function is ran, which would reduce the number of API calls made for input validation.

[simonmaass]

I kinda have the same issue... when i have a field with a validation of 9 characters for example... i dont want the use to receive a validation warning if he starts typing the first character as he still typing in the characters... i would rather have the field to validate on blur.. how can this be achieved? using the useField composable...

[olivierbourdeau]

According to the documentation, you can set validateOnValueUpdate to false. So something like :

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