1

Estou tentando criar uma validação simples de dois campos, onde eu verifico apenas se existe um valor ou não, porém o segundo if só é executado depois de passar pela verificação do primeiro.

Eu queria que os dois fossem disparados ao mesmo tempo, qual seria a forma mais prática de fazer isso?

Segue o exemplo da minha validação atual:

    $(document).ready(function(){

$('#formLogin').on('submit', function(e){
    if($('#txtLogin').val() == ''){
        e.preventDefault();
        if (!$('.err-text').length) {
            $('#txtLogin').closest('.login__column').append(`<span class="err-text">*E-mail incorrecto.
<br>Ingresa un E-mail válido para participar.</span>`);
        }
    } else {
        $('#txtLogin').next('.err-text').remove();
    }
    if($('#txtSenha').val() == ''){
        e.preventDefault();
        if (!$('.err-text').length) {
            $('#txtSenha').closest('.login__column').append(`<span class="err-text">*Contraseña incorrecta.
<br>Ingresa una contraseña válida para participar.</span>`);
        }
    } else {
        $('#txtSenha').next('.err-text').remove();
    }
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formLogin">
<div class="login__column">
<input type="text" id="txtLogin">
</div>
<div class="login__column">
<input type="text" id="txtSenha">
</div>
<button type="submit">Enviar</button>
</form>

2 Respostas 2

2

Coloquei um each no teu código, então assim ele vai percorrer os dois inputs e colocar as mensagens de erro ao mesmo tempo.

Assim o código fica mais dinâmico e mais fácil de dar manutenção.

$(document).ready(function() {
  $('#formLogin').on('submit', function(e) {
    e.preventDefault();
 
    $(this).find('input[type=text]').each(function() {
      if($(this).val() == '') {
        if (!$(this).next('.err-text').length) {
            var texto = $(this).attr('id') == 'txtLogin' ? '*E-mail incorreto' : '*Senha incorreta';
            $(this).parent().append('<span class="err-text">' + texto +'</span>');
        }
      } else {
        $(this).next('.err-text').remove();
      }
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formLogin">
<div class="login__column">
<input type="text" id="txtLogin">
</div>
<div class="login__column">
<input type="text" id="txtSenha">
</div>
<button type="submit">Enviar</button>
</form>

1
  • Legal a sua solução Commented 27/03/2018 às 13:06
0

Você tem que separar o click do botão, isso acontece porque o javascript é assincrono, vai executando de cima pra baixo, então na sua situação, vai executar teste por teste, dessa forma ele vai disparar ambas as funções ao mesmo tempo.

A sua resposta vai ficar assim:

$('#formLogin').on('submit', function(e){
    //teste
}
$('#formLogin').on('submit', function(e){
    //segundo teste
}

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 .