Fazer primeiro validações antes de enviar formulario por jquery

[suelystonn 3]

Olá pessoal,

 

Estou com um pequeno problema que tem me deixado ate frustrado. Ja pesquisei na net mais sem solução.

 

Basicamente não sei quase nada de jquey (sou sincero :yes: ), então se puderem me ajudar, agradeço de coração.

 

Queria que o jquery fizesse primeiro as validações pra depois fazer o submit, mais esta ocorrendo as duas coisas ao mesmo tempo. Vejam o código

<script type="text/javascript">
$(document).ready( function() {
	$("#fazerlogin").validate({
		// Define as regras
		rules:{
			usuario:{
				// campoNome será obrigatório (required) e terá tamanho mínimo (minLength)
				required: true,
			},
			senha:{
				// campoMensagem será obrigatório (required) e terá tamanho mínimo (minLength)
				required: true,
			}
		},
		// Define as mensagens de erro para cada regra
		messages:{
			usuario:{
				required: "Digite seu nome de usuário",
			},
			senha:{
				required: "Digite sua senha"
			}
		
		}
	});
});

$(function(){

$("#fazerlogin").submit(function(){

var usuario = $("#usuario").val();
var senha = $("#senha").val();

$.post("../logando/verifica.php", { usuario:usuario, senha:senha }, function(get_retorno) {

if (get_retorno == 1) {
$("#retorno4").hide("slow");
$("#retorno3").hide("slow");
$("#retorno2").hide("slow");
$("#retorno").show("slow").text('Estamos em manutenção. Volte mais tarde!');
} else if (get_retorno == 2){
$("#retorno4").hide("slow");
$("#retorno3").hide("slow");
$("#retorno").hide("slow");
$("#retorno2").show("slow").html('Entrando...');
window.setTimeout("location.href='/profile/'",2000)
} else if (get_retorno == 3){ 
$("#retorno4").hide("slow");
$("#retorno2").hide("slow");
$("#retorno").hide("slow");
$("#retorno3").show("slow").html('Você ainda não confirmou seu e-mail! Por favor, entre em sua caixa de e-mail e copie o código que enviamos, logo após insira-o <a href="/accounts/register/complete/">clicando aqui</a>.</br></br><b>OBS:</b> Caso não encontre verifique a caixa de Spam/Lixo Eletrônico.');
} else if(get_retorno == 4){ 
$("#retorno3").hide("slow");
$("#retorno2").hide("slow");
$("#retorno").hide("slow");
$("#retorno4").show("slow").text('Usuário ou senha incorreta!');
}

});
});
});
</script>

E o formulario:

<form onsubmit="return false" class="form" name="fazerlogin" id="fazerlogin" method="POST">
        <div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='7qWlNtTMFDqYa58aBaPBR3G5LURsgsdM' /></div>
	<input type="text"  placeholder="Usuário" name="usuario" id="usuario" />
	<input type="password"  placeholder="Senha" name="senha" id="senha" />
	<input type="submit" name="loginentra" value="Login">
	<div id="retorno" class="alert contact-form-message alert-info" style="display: none; margin-top:40px;"><br /></div>
	<div id="retorno2" class="alert contact-form-message alert-success" style="display: none; margin-top:40px;"><br /></div>
	<div id="retorno3" class="alert contact-form-message alert-info" style="display: none; margin-top:40px;"><br /></div>
	<div id="retorno4" class="alert contact-form-message alert-error" style="display: none; margin-top:40px;"><br /></div>
	<small><a href="/accounts/password/reset/">Não consegue acessar sua conta?</a> <br>
	<a href="/accounts/register/complete/">Ainda não ativou sua conta?</a></small>
      </form>

[Snowden 94]

Não precisa inicializar o jquery 2 vezes.

// quando o documento é carregado
$(document).ready(function(){
 ...
});

// carrega de imediato
$(function(){
 ...
});

No plugin..

// falta incluir função callback executada quando o form foi validado
submitHandler: function( form ){
  // você pode enviar os dados do form a partir daqui.
return false;
}

veja mais opções na documentação do plugin .validate()

 

seu js correto

$(document).ready(function(){
     $("#fazerlogin").validate({
	rules:{
	     usuario:{
		required: true
	     },
	     senha:{
		required: true
	     }
	},
	messages:{
	     usuario:{
		required: "Digite seu nome de usuário"
	     },
	     senha:{
		required: "Digite sua senha"
	     }
	},
	submitHandler:function( form ){
	     var data = $("#fazerlogin").serialize(); // aqui pega os dados do form
	     $.post("../logando/verifica.php", data, function( get_retorno ){
		if( get_retorno == 1 ){
		    ...continue
		}
	     });
	return false;
	}
     });
});

[suelystonn 3]

Valeu Hugo, resolveu meu problema. :joia:​