How to put a "loading" image after validation and Submit?

Question

I have the following situation, a form with Jquery validation working. However, as I am sending some attachments in the form via email, I wanted to present an image for the user to wait.

Then the trouble started.

If all form fields are filled in correctly, no validation errors, it works perfectly with the image of "loading".

Now if a validation error occurs, the loading appears and locks the form.

So my idea was to make only the loading if there was no error to avoid locking.

I will post my validation js code:

$(function () {
$("#divErro").dialog({
    title: 'Erros de Preenchimento',
    bgiframe: true,
    modal: true,
    autoOpen: false,
    buttons: {
        Ok: function () {
            $(this).dialog('close');
        }
    }
});
$.validator.addMethod("verificaTipo", function (value, element) {
    if (value === null) {
        return false;
    }
    return true;
}, "Selecione um tipo válido.");

$("#formEmail").validate({
    invalidHandler: function (e, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {
            var message = 'Existe(m) ' + errors + '    campo(s) de preenchimento obrigatório com erro. \n Para corrigir, observe a mensagem de erro no campo em destaque.';
            erro(message);
        }
        return;
    },
    rules: {
        'email.destinatario': {
            required: true,
            email: true
        },
        'email.cc': {
            email: true
        },
        'email.cco': {
            email: true
        },
        'email.assunto': {
            required: true,
            maxlength: 100
        },
        'email.corpo': {
            required: true,
            maxlength: 300
        }
    }
});

And here my function that opens a dialog with the Submit button and cancel:

function enviaProposta(cod) {
            var buttons = {};
            buttons["Enviar"] = function () {
                $("#formEmail").attr("action", "<c:url value="/proposta/enviarPropostaPorEmail"/>");                                   
                $("#formEmail").submit();                    
                $("#loadingImg").show();// aqui coloquei a imagem de loading

            };
            buttons["Cancelar"] = function () {
                $(this).dialog('close');
                $('#dialogEmail').limpaForm();

            };
            $('#dialogFormEmail').dialog('option', 'title', 'Enviar Proposta por E-Mail');
            $('#dialogFormEmail').dialog({buttons: buttons});
            $('#dialogFormEmail').dialog('open');
            buscaPropostaEmail(cod);
        }

Could you help me with that?

Answer 1

I usually use the function beforeSend ajax. In place of:

$("#formEmail").attr("action", "<c:url value="/proposta/enviarPropostaPorEmail"/>");                                   
            $("#formEmail").submit();                    
            $("#loadingImg").show();// aqui coloquei a imagem de loading

Place

$.ajax({
  type: 'POST',
  url: '/proposta/enviarPropostaPorEmail',
  data: $("#formEmail").serialize(),
  beforeSend : function(){
    $("#loadingImg").show();
  }
  success : function(result){
    alert("Enviado");
    $("#loadingImg").hide();
  }
});

Answer 2

I believe that the Nprogress can solve your problem.