0

Criei uma animação que aparece na tela e bloqueia os campos digitados pelo usuário enquanto a requisição é processada, diretamente no submit, conforme abaixo:

onclick="javascript:document.getElementById('blanket').style.display = 'block';document.getElementById('aguarde').style.display = 'block'; block();"

Aparecendo a imagem abaixo:

inserir a descrição da imagem aqui

Acontece que se o usuário não preencher alguma informação, o formulário não é enviado e aparece o aviso devido ao required, mas a animação é executada de qualquer forma, e para voltar a página somente atualizando a mesma.

Existe alguma forma do onClick aguardar a validação dos campos required antes de executar essa animação?

1 Resposta 1

1

Nesse caso o onclick será executado de qualquer forma. Para que essa validação de bloqueio seja ativada somente se os critérios forem preenchidos, coloque dentro o evento onsubmit e tire do onclick. Pode ser algo como:

document.getElementById('meu_form').addEventListener("submit", function(){
    document.getElementById('blanket').style.display = 'block';
    document.getElementById('aguarde').style.display = 'block'; 
    block();
});
9
  • Obrigado pela resposta. Alterei a função mas não funcionou, nem chamou a animação.
    – Diego
    Commented 3/02/2017 às 13:14
  • No lugar do meu_form vai o id do seu formulário. Acredito que onlick postado estava no no input type submit, certo?! Ele só vai cair no submit se os required tiverem sidos satisfeitos.
    – BrTkCa
    Commented 3/02/2017 às 13:15
  • Sim, alterei com a id do meu form, mas não funcionou. Vou tentar novamente.
    – Diego
    Commented 3/02/2017 às 13:36
  • Beleza. Se não conseguir e puder criar um Fiddle, eu te ajudo =]
    – BrTkCa
    Commented 3/02/2017 às 13:38
  • 1
    Funcionou, coloquei direto no evento do form e tirei tudo do submit. +1. Abraço e obrigado.
    – Diego
    Commented 3/02/2017 às 13:43

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 .