Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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](https://jsfiddle.net/sLq1pcbp/)/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.Console/Debug apresenta erro?
>
1 minuto atrás, gabrieldarezzo disse:
Console/Debug apresenta erro?
Não, era erro meu mesmo de digitação haha agora funcionou certinho.
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
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");
});>
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!
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/](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,
Pensa comigo.
esse 'for' ai percorre e dispara a função em todas as vezes.