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

Question

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 then blur, 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.

Update 1 as one of the below answers suggested adding

evt.stopImmediatePropagation();

dampened the issue, but not solve it. To expand on the matter, i updated my JSFiddle to add a radio button: https://jsfiddle.net/zwadhp3s/

Answer 1

As per document jQuery event triggered on elements after they have been validated. So for that solution, you have to put evt.stopImmediatePropagation();

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

$('input:not([type=radio]),textarea')
  .on('validation', function(evt, valid) {
  evt.stopImmediatePropagation();
      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("");
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.79/jquery.form-validator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js"></script>

<form id="form-1">
  <div class="col-sm-6 parent-input">
    <div class="career-input-wrap input has-success">
        <input name="data[Application][first_name]" column="col-sm-6" class="required valid" value="asdas" data-validation="required" data-validation-error-msg="This field is required" type="text" id="ApplicationFirstName" placeholder="First Name">
    </div>
</div>
  
  <input type="submit" value="submit">
</form>