Search code examples
javascriptvalidationvue.jsvuejs2vuelidate

Vuelidate firing multiple times on page load

I'm using Vue, and for validations, Vuelidate.

When using a custom validator that performs an AJAX call , it is firing multiple times on page load and even before user interaction(vuelidate's $touch).

After these multiple calls on first load, the validation works correctly. (I use this validation on input change, using vue @change)

I tried setting a flag isMounted to perform the validations inside de custom validator only after the whole instance is loaded, but without success.

CODE

The validator (only with debug, for testing):

validations() {
    return {
        myFieldToValidate(field) {
            test_validation(value) {
                console.log('test validation fired!', Math.random());
                return true;
            }
        }
    }
}

Then, when I reload the page, it is firing multiple times:

multiple-calls

I want to make the validation "fire" based only by my event(input change), not multiple times on page load. How to achieve this?

Solution

  • I ended making my own function that makes the ajax call, separating from vuelidate. I used lodash' _.debounce to control the calls.

    I binded the function to the @input event, make the ajax call based on it and returned a "flag" attribute with the result.

    Then, I use this flag to check the validity of the field.

    Using this abordage, the event is not firing multiple times on page load.