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>