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

Question

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

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

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

The problems started there.

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

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

So my idea was to make only loading appear if there was no error to prevent locking.

I'll 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&aacute;lido.");

$("#formEmail").validate({
    invalidHandler: function (e, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {
            var message = 'Existe(m) ' + errors + '    campo(s) de preenchimento obrigat&oacute;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 is 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 this?

jquery jquery-validate

asked by anonymous 11.05.2015 / 16:50

2 answers

0

I believe that NProgress can solve your problem.

11.05.2015 / 17:01

GPS on Android - Map = null Load dynamic data into javascript

score 2 · Accepted Answer

I usually use the beforeSend function of Ajax. Instead 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();
  }
});