trigger Function after form validation

Question

I have a form with validation, and I need to enter after validating this form a waiting hourglass (as if loading the page).

I would like to know how to join these two functions, and after validating the form, triggers the other:

//Validacao cadastro-completo.php
$("#form3").validate({
    rules: {
    constituicao: {
      required: true,
      minlength: 10,
      validadata: true
    },
    email: {
      required: true,
      email: true
    },
  messages: {
    constituicao: {
      required: "Esse campo é obrigatório",
      minlength: "Data Inválida"
    },
    email: {
      required:"Esse campo é obrigatório",
      email: "Email inválido"
    }
  }
});


function loading() {
    $('body').append("<div class='loading'></div>");        
}
$('.open-loading').click(function () {
    loading();
});

Answer 1

From what I’ve analyzed, inside the validate is an attribute called : submitHandler that you can put the method that will be executed after the validation of the form, according to the code snippet below:

   function loading() {
        $('body').append("<div class='loading'></div>");        
   }

   $("#form3").validate({
        submitHandler: function(form) {
           loading();
        }
   });

The simplest and check in the plugin documentation : https://jqueryvalidation.org/validate/

Answer 2

There is a javascript plugin called jQuery Form. I recently posted a example how to use it.

It has the parameter beforeSubmit that you can call a Function and apply $("#form3").validate() and hourglass of waiting.

beforeSubmit:  valida

// pre-submit callback 
function valida(formData, jqForm, options) { 
    // Aplique as validações do form aqui  
    // O return false previne o submit do form
    // Qualquer retorno ao contrário de false permitirá o submit do form 
    return true; 
}