Validação de Formulário

[Felipe Evangelista 2]

Bom, tenho um formulário que é validado se os inputs estão vazios, até aí ok, faz a validação no if de todos os inputs corretamente, mas com os inputs preenchidos, não faz o envio no else.

Onde eu errei? :/

 

<form id="contact-form">
<input type="text" name="nome" placeholder="Nome*:" value="" class="required" />
<input type="text" name="telefone" placeholder="Telefone*:" value="" class="required" />
<input type="text" name="email" placeholder="Email*:" value="" class="required" />
<button type="submit" id="enviar"  name="submit">Concluir Cadastro</button> 
</form>

$("#contact-form").submit(function(){

    event.preventDefault();

    var dados = $(this).serialize();
    var campos = $(this).find('.required');

    $(campos).each(function() {
        for(i=0; i=$(this).val() == ''; i++ ){
            if( $(this).val() == '' )
            {
                alert("Preencha os campos obrigatórios");
                $(this).focus();
                e.preventDefault();
            }else {
                 $.ajax({
                     type: "POST",
                     url: "cadastrar.php",
                     data: dados,
                     success: function(data)
                     {
                         $("#status").slideDown();
                         $("#status").html(data);
                     }
                 });
            $('#contact-form').trigger("reset");

            }
        }
    });
});

https://jsfiddle.net/sLq1pcbp/

[gabrieldarezzo 255]

Pensa comigo.

 

esse 'for' ai percorre e dispara a função em todas as vezes.

Seria mais sensato você percorrer todos os campos (validando com o for, caso algum invalido return false;) 

 

e após a validação (for) estar concluída ai sim você envia.

 

 

 

Tenta ai qlq coisa da um grito.

 

 

[Felipe Evangelista 2]

Deixe eu ver se entendi o raciocínio, algo mais ou menos assim?

 

$("#contact-form").submit(function(){
    event.preventDefault();
    var dados = $(this).serialize();
    var campos = $(this).find('.required');
    var valida = true;
    $(campos).each(function() {
        for(i=0; i=$(this).val() == ''; i++ ){
            if( $(this).val() == '' )
            {
                alert("Preencha os campos obrigatórios");
                $(this).focus();
                e.preventDefault();
                valida = false;
            }else {
                 valida = true;
            }
        }
     });
    if (valida = true) {
            $.ajax({
                 type: "POST",
                 url: "cadastrar.php",
                 data: dados,
                 success: function(data)
                 {
                     $("#status").slideDown();
                     $("#status").html(data);
                 }
             });
        $('#contact-form').trigger("reset");
    }
 });

De qualquer forma, funcionou aqui. Eu tinha falado que não funcionou no Safari, mas já peguei a treta. 

[gabrieldarezzo 255]

Console/Debug apresenta erro?

[Felipe Evangelista 2]

1 minuto atrás, gabrieldarezzo disse:

Console/Debug apresenta erro?

Não, era erro meu mesmo de digitação haha agora funcionou certinho.

[gabrieldarezzo 255]

Tem um conceito em programação muito bacana,

 

Early return.

 

Simplifique sempre que possível.

Se a execução não pode seguir a partir daquele momento, já retorne ao invez de manter varios blocos de if's

http://stackoverflow.com/questions/40011048/if-else-or-early-returnhttp://stackoverflow.com/questions/40011048/if-else-or-early-return

 

 

Veja como ficaria:

$("#contact-form").submit(function() {
    event.preventDefault();
    var dados = $(this).serialize();

    $(this).find('.required').each(function() {

        if ($(this).val() == '') {
            alert("Preencha os campos obrigatórios");
            $(this).focus();
            return false;
        }
    });

    $.ajax({
        type: "POST",
        url: "cadastrar.php",
        data: dados,
        success: function(data) {
            $("#status").slideDown();
            $("#status").html(data);
        }
    });
    $('#contact-form').trigger("reset");

});

 

[Felipe Evangelista 2]

11 minutos atrás, gabrieldarezzo disse:

Tem um conceito em programação muito bacana,

 

Early return.

 

Simplifique sempre que possível.

Se a execução não pode seguir a partir daquele momento, já retorne ao invez de manter varios blocos de if's

 

Hum, entendi, então com o return false ele não segue para o ajax? Eu achei que seguiria por estar em blocos diferentes, de qualquer forma vou dar uma olhada nesse link que provavelmente o que eu perguntei está respondido ali haha valeu!

[gabrieldarezzo 255]

Puts eu fiz um exemplo errado haushausas

 

Se liga ele corrigido:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

<form action="" method="post" id="contact-form">
	<input type="text" name="nome" class="required" />
	<input type="email" name="email" class="required" value=""/>

	<input type="submit" value="Enviar" />
</form>

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>	
<script type="text/javascript">
	$(document).ready(function() {
		
		$("#contact-form").submit(function() {
			event.preventDefault();
			
			var campos = $("#contact-form").find('.required').toArray();
			for(x in campos){
				
				var campoLoop = $(campos[x]);
				if(campoLoop.val() == ''){
					
					alert("Preencha o campo: "+ campoLoop.attr('name'));
					$(campos[x]).focus();
					return false;
				}
			}
			
			alert('Iniciando o Ajax...');
			
			var dados = $(this).serialize();
			/*
			$.ajax({
				type: "POST",
				url: "cadastrar.php",
				data: dados,
				success: function(data) {
					$("#status").slideDown();
					$("#status").html(data);
				}
			});
			*/
			$('#contact-form').trigger("reset");

		});
	
		
	});

</script>
</body>
</html>

Demo:

https://fiddle.jshell.net/Lc2d18mp/

 

 

 

Motivo da minha cagada:

$(this).find('.required').each(function() {

	
});

 

Pois esse cara é uma função anonima (repare o function())

Então ele estava retornando false, porem a propria função,