Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

validate function called more than once when "on('validation')" is called #741

Open
amjo opened this issue Jun 28, 2019 · 0 comments
Open

Comments

@amjo
Copy link

amjo commented Jun 28, 2019

i have a pretty huge form with many types of fields (date, numbers, text, checkboxes, radios, etc..).

One of the important behaviors i need form my form is to be able to save form fields individually on blur... of course, i need to validate each field on blur, and if it's a valid field, we call a "saveField()" function.

Naturally, i initialize the form validation with:

$.validate({
        form: '#form-1',
        modules: 'location, logic, html5, security',
        onModulesLoaded: function() {
            $('input.hasCountry').suggestCountry();
        },
    });

later on add an event listener to the "validation" event for each form field (i haven't added a "Blur" event listener, since form validator already takes care of that for me... so below is the on("validation") method:

$('input:not([type=radio]),textarea')
        .on('validation', function(evt, valid) {
            var error_div = $(this).parents(".parent-input").find('.custom-error');

            if (!valid) {
                var error_message = evt.target.dataset.validationErrorMsg;
                if (!error_message) {
                    error_message = "Please provide a valid input";
                }
                error_div.html(error_message);
            } else {
                error_div.html("");

								// saveField();
                console.log("I CALL THE SAVE FUNCTION!");
            }
        })
        .on('beforeValidation', function(value, lang, config) {
            var error_div = $(this).parents(".parent-input").find('.custom-error');
            error_div.html("");
        });

Here's what's weird!
When i type something, and focus out: - the console.log("I CALL SAVE...."); is triggered... once! (this is expected)
but try to focus on it again, i get the console.log() fired twice => meaning the on("validation") is being triggered twice.

JSFiddle Link: https://jsfiddle.net/tg3h16ec/4/
Open up your browser's console and follow the above mentioned steps by typing something and focusing out. then just type something and focus out again. you'll notice the the console.log() count is initially 1, then it starts incrementing by 2 each time.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant