2

Estou fazendo um formulário com validações do abide (Foundation 6) e não estou conseguindo prevenir vários submit's.

Acontece o seguinte: Quando é clicado no botão Submit do formulário a seguinte função entra em ação.

$('#form-principal').submit(function(e) {
  e.preventDefault();
  // sem o formvalid.zf.abide do foundation, o submit acontece com campos inválidos
  $(this).on('formvalid.zf.abide', function () {
        alert('Submitou');
  });
});

O problema é o seguinte: Quando é clicado no botão submit, o Abide reclama do campo inválido, até ai tudo bem, o usuário vai e corrigi o campo para o abide validar corretamente e clica novamente no Submit, e então, a função acima "submita" 2x em um único clique. E assim por diante, por exemplo: se clicar 3x no submit o Abide não validar as 3x, na 4° vez se estiver tudo certo, o submit será feito 4x em um único clique.

Alguma ideia para prevenir esses vários submit's?

HTML:

<form id="form-principal" method="post">
  <label>Teste
    <input type="text" name="teste" required>
  </label>
  <button>
    Vai filhão
  </button>
</form>

<script>
  // inicia o Foundation
  $(document).ready(function() {
    $(document).foundation();
  });
</script>

2 Respostas 2

2

O problema é que a cada submit do seu #form-principal você adiciona um novo listener de evento no formvalid.zf.abide. Então ele vai responder as N vezes que você ja submitou o #form-principal.

Se realmente for necessário você adicionar o evento no formvalid.zf.abide apenas quando fizer o submit do #form-principal, retire o evento anterior e adicione de novo:

$('#form-principal').submit(function(e) {
  e.preventDefault();

  $(this).off('formvalid.zf.abide');
  $(this).on('formvalid.zf.abide', function () {
        alert('Submitou');
  });
});

Sugiro você habilitar o botão de submeter o form dentro do evento que valida o #form-principal:

$(document)
  .on('forminvalid.zf.abide', function () {
    $('#form-principal input[type=submit]').prop('disabled', true);
  })
  .on('formvalid.zf.abide', function () {
    $('#form-principal input[type=submit]').prop('disabled', false);
  });
$('#form-principal').submit(function(e) {
  e.preventDefault();
});
1
  • usei com o $(this).off('formvalid.zf.abide'); e deu certo! Muito Obrigado! Commented 8/02/2017 às 16:31
1

Eu desabilitaria o botão depois que o usuário clicasse

//JavaScript

document.getElementById("button").disabled = true;

Ou em Jquery

$("button").prop("disabled",true);

1
  • O disabled eu faço no inicio do programa original, o que acontece é quando o form é "submitado", ele considera as tentativas que fiz anterior quee não deram certo. Ou seja, há vezes que clico 1x no botão submit e o jQuery manda o submit 3x Commented 8/02/2017 às 16:09

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 .