2

Tenho a seguinte situação, um formulário com validação Jquery funcionando. Porém, como estou enviando alguns anexos no formulário via e-mail, eu queria apresentar uma imagem para o usuário aguardar.

Ai começaram os problemas.

Se todos os campos do formulário forem preenchidos corretamente, sem erros na validação, funciona perfeitamente com a imagem de "loading".

Agora se der um erro de validação, o loading aparece e trava o formulário.

Então minha ideia era fazer com que somente aparecesse o loading se não houvesse erro para evitar o travamento.

Vou postar meu código de js de validação:

$(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
        }
    }
});

E aqui minha função que abre um dialog com o botão submit e cancelar:

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);
        }

Poderiam me ajudar nisso?

0

2 Respostas 2

2

Eu costumo usar a função beforeSend do Ajax. No lugar de:

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

Coloque

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

1
  • Obrigada @Diego Souza , funcionou perfeitamente! Tks 12/05/2015 às 0:31
0

Acredito que o NProgress possa resolver seu problema.

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .