Validação Ajax com bug...

WorldToth · Dezembro 4, 2014

Olá pessoal, primeiramente o meu caso é com Jquery, como não achei uma área do fórum especifica para postar o mesmo, então não vi outra alternativa para pedir ajuda... espero que não tenha problema...

É o seguinte tenho um formulário onde fiz do mesmo 4 etapas para cadastrar os dados dele no banco, e to fazendo isso sem da refresh na pagina usando Ajax e minha validação vem do plugin da jqueryvalidation.org aonde verifico se os campos estão preenchidos com o minimo de caracteres e tal e se o email já existe pelo metodo remote...

O problema eu acho que sei onde está, mas não consigo resolver, quando ta tudo preenchido mas com a validação errada (ex: senha não confere, email já existe, e o minimo de caracteres não foi atingido) ele manda o else do mesmo jeito sendo que não é pra mandar...

detalhe aparece as mensagens de erro tudo certo...

Não consigo achar o erro... o estranho é que tem hora que ele faz certo hora não...

$(document).ready(function(){
	var Form		= $("#cadastrar_banda");
	$(Form).submit(function(){ return false; });
	var v = $(Form).validate({
		rules: {
			email: { required: true, email: true,
				remote: { 
					url: "system/system.php",
					type: "post"
				}
			},
			pass: { required: true, minlength: 4, maxlength: 16 },
			confirmPass: { required: true, equalTo:"#pass" },
			name: { required: true, minlength: 2 },
			genre: { required: true, minlength: 2 },
			uf: { required: true },
			city: { required: true },
			MethodPayment: { required: true }
		},
		messages: {
			email: { required: "Digite um e-mail!", email: "Digite um email valido!", remote: "Este e-mail já existe!" },
			pass: { required: "Digite uma senha!",  minlength: "Digite no minimo 4 caracteres!", maxlength: "Digite no maximo 16 caracteres!" },
			confirmPass: { required: "Repita sua senha", equalTo: "As senhas não conferem!"},
			name: { required: "Digite o nome da banda!", minlength: "Digite no minimo 2 caracteres!" },
			genre: { required: "Digite o genêro da banda!", minlength: "Digite no minimo 2 caracteres!" },
			uf: { required: "Escolha um estado!" },
			city: { required: "Escolha uma cidade!" },
			MethodPayment: { required: "Escolha qual forma de pagamento!" }
		},
		submitHandler: function( form ){
			var dados	= $(Form).serialize();
			var acao	= "&acao=Sign_up";
			var sender	= dados + acao;
			$.ajax({
				data: sender,
				url: "system/system.php",
				dataType: "html",
				global: false,
				type: "POST",
				success: function( data ){
					alert("Cadastro realizado com sucesso!");
					form.reset();
					$("#Confirm").slideUp();
					$("#User").slideDown();
					$("Form input, Form select").removeAtrr("disabled");
				}
			});
		return false;
		}
	});
        //Começo da validação
	$("#SubmitFirst").click(function(){
                //Recuperando valores da 1º etapa
		var values = [
			$("Form #User input[name=email]").val(),
			$("Form #User input[name=pass]").val(),
			$("Form #User input[name=confirmPass]").val()
		];
                //Se os campos estão vazios e pego a validação retorna error e as mensagens.
		if(values.indexOf("") !== -1 && v){
			$("#FormBtn1").css({"background":"red"});
		}else{//Validação passo passa para outra etapa
			$("#User").slideUp();
			$("#PersonalDate").slideDown();
			$("#FormBtn1").removeAttr("disabled").css({"background":"green"});
			$("#FormBtn2").removeAttr("disabled").css({"background":"blue"});
			$("#User input").attr("disabled","disabled");
			
			return false;
		}
	});
	
	$("#SubmitSecond").click(function(){
		if($("#PersonalDate input[type=text]").val()=="" && v){
			$("#FormBtn2").css({"background":"red"});
		}else{
			$("#PersonalDate").slideUp();
			$("#Payment").slideDown();
			$("#FormBtn2").css({"background":"green"});
			$("#FormBtn3").removeAttr("disabled").css({"background":"blue"});
			$("#PersonalDate input").attr("disabled","disabled");
			
			return false;
		}
	});
	
	$("#SubmitTri").click(function(){
		if($("#Payment input[type=text] select").val()=="" && v){
			$("#FormBtn3").css({"background":"red"});
		}else{
			$("#Payment").slideUp();
			$("#Confirm").slideDown();
			$("#FormBtn3").css({"background":"green"});
			$("#FormBtn4").removeAttr("disabled").css({"background":"blue"});
			$("#Payment input").attr("disabled","disabled");
			
			$('#Confirm input[name=name]').val($('Form input[name=name]').val());
			$('#Confirm input[name=genre]').val($('Form input[name=genre]').val());
			$('#Confirm input[name=email]').val($('Form input[name=email]').val());
			$('#Confirm input[name=pass]').val($('Form input[name=pass]').val());
			$('#Confirm input[name=pagamento]').val($('Form select[name=methodPayment]').val());
			$('#Confirm select[name=uf]').html("<option>"+$('Form select[name=uf]').val()+"</option>");
			$('#Confirm select[name=city]').html("<option>"+$('Form select[name=city]').val()+"</option>");
			
			return false;
		}
	});
	
	$("#SendForm").click(function(){
		if(v == true){
			return;
			
		}
	});
});

William Bruno · Dezembro 4, 2014

ele manda o else do mesmo jeito sendo que não é pra mandar...

que else é esse ?

WorldToth · Dezembro 4, 2014

O da linha 62... ele passa a validação não sei como sendo que existem campos errados...

Eu também tentei trocar os operadores de comparação && da linha 60 para || ele faz certo mas ai manda o formulário logo da 1 etapa...

fiz também um else if só comparando a variavel v manda o form do mesmo jeito...

William Bruno · Dezembro 4, 2014

Não faz nenhum sentido essa tua verificação da variável v.

Faça o teste de outra maneira.

WorldToth · Dezembro 4, 2014

William Bruno

Vlw pelá força!

Dei uma olhada la na documentação do jquery.validation no method .form()

e depois fiz algumas alterações no código e consegui,

Vou deixa o script pra quem quiser ver, (sem querer desmerecer sua dica William!)

Não faz nenhum sentido essa tua verificação da variável v.

Faça o teste de outra maneira.

se tiver alguma sugestão que me ajude a melhorar a sintaxe e deixar menor o código agradeço... Porque realmente eu sinto que não precisa do v... Mas ta dando certo...

Só tem mas uma coisa que notei agora depois que ele envia e reseta o form ele não tira o disabled como passei la no success do ajax. oq será q to errado...

$(document).ready(function(){
	var Form		= $("#cadastrar_banda");
	$(Form).submit(function(){ return false; });
	var v = $(Form).validate({
		rules: {
			email: { required: true, email: true,
				remote: { 
					url: "system/system.php",
					type: "post"
				}
			},
			pass: { required: true, minlength: 4, maxlength: 16 },
			confirmPass: { required: true, equalTo:"#pass" },
			name: { required: true, minlength: 2 },
			genre: { required: true, minlength: 2 },
			uf: { required: true },
			city: { required: true },
			MethodPayment: { required: true }
		},
		messages: {
			email: { required: "Digite um e-mail!", email: "Digite um email valido!", remote: "Este e-mail já existe!" },
			pass: { required: "Digite uma senha!",  minlength: "Digite no minimo 4 caracteres!", maxlength: "Digite no maximo 16 caracteres!" },
			confirmPass: { required: "Repita sua senha", equalTo: "As senhas não conferem!"},
			name: { required: "Digite o nome da banda!", minlength: "Digite no minimo 2 caracteres!" },
			genre: { required: "Digite o genêro da banda!", minlength: "Digite no minimo 2 caracteres!" },
			uf: { required: "Escolha um estado!" },
			city: { required: "Escolha uma cidade!" },
			MethodPayment: { required: "Escolha qual forma de pagamento!" }
		},
		submitHandler: function( form ){
			var dados	= $(Form).serialize();
			var acao	= "&acao=Sign_up";
			var sender	= dados + acao;
			$.ajax({
				data: sender,
				url: "system/system.php",
				dataType: "html",
				global: false,
				type: "POST",
				success: function( data ){
					alert("Cadastro realizado com sucesso!");
					form.reset();
					$("#Confirm").slideUp();
					$("#User").slideDown();
					$("#FormNav ul li button").css({"background":""});
					$("Form input, Form select").removeAtrr("disabled");
				}
			});
		return false;
		}
	});
	
	$("#SubmitFirst").click(function(){
		var values = [
			$("Form #User input[name=email]").val(),
			$("Form #User input[name=pass]").val(),
			$("Form #User input[name=confirmPass]").val()
		];
		if(values.indexOf("") !== -1 || v.form() == false){
			$("#FormBtn1").css({"background":"red"});
		}else{
			$("#User").slideUp();
			$("#PersonalDate").slideDown();
			$("#FormBtn1").removeAttr("disabled").css({"background":"green"});
			$("#FormBtn2").removeAttr("disabled").css({"background":"blue"});
			$("#User input").attr("disabled","disabled");
			
			return false;
		}
		
	});
	
	$("#SubmitSecond").click(function(){
		var values = [
			$("Form #PersonalDate input[name=name]").val(),
			$("Form #PersonalDate input[name=genre]").val(),
			$("Form #PersonalDate select[name=uf]").val(),
			$("Form #PersonalDate select[name=city]").val()
		];
		if(values.indexOf("") !== -1 || v.form() == false){
			$("#FormBtn2").css({"background":"red"});
		}else{
			$("#PersonalDate").slideUp();
			$("#Payment").slideDown();
			$("#FormBtn2").css({"background":"green"});
			$("#FormBtn3").removeAttr("disabled").css({"background":"blue"});
			$("#PersonalDate input").attr("disabled","disabled");
			
			return false;
		}
	});
	
	$("#SubmitTri").click(function(){
		var values = $("Form #Payment select[name=methodPayment]").val();
			
		if(values == "" || v.form() == false){
			$("#FormBtn2").css({"background":"red"});
		}else{
			$("#Payment").slideUp();
			$("#Confirm").slideDown();
			$("#FormBtn3").css({"background":"green"});
			$("#FormBtn4").removeAttr("disabled").css({"background":"blue"});
			$("#Payment input").attr("disabled","disabled");
			
			$('#Confirm input[name=name]').val($('Form input[name=name]').val());
			$('#Confirm input[name=genre]').val($('Form input[name=genre]').val());
			$('#Confirm input[name=email]').val($('Form input[name=email]').val());
			$('#Confirm input[name=pass]').val($('Form input[name=pass]').val());
			$('#Confirm input[name=pagamento]').val($('Form select[name=methodPayment]').val());
			$('#Confirm select[name=uf]').html("<option>"+$('Form select[name=uf]').val()+"</option>");
			$('#Confirm select[name=city]').html("<option>"+$('Form select[name=city]').val()+"</option>");
			
			return false;
		}
	});
	
	$("#SendForm").click(function(){
		var values = [
			$('Form #Confirm input[name=name]').val(),
			$('Form #Confirm input[name=genre]').val(),
			$('Form #Confirm input[name=email]').val(),
			$('Form #Confirm input[name=pass]').val(),
			$('Form #Confirm input[name=pagamento]').val(),
			$('Form #Confirm select[name=uf]').val(),
			$('Form #Confirm select[name=city]').val()
		];
		if(values.indexOf("") !== -1 || v.form() == false){
			$("#FormBtn4").css({"background":"red"});
		}else{
			return v;
		}
	});
});

Entrar

Arquivado

Validação Ajax com bug...

Recommended Posts

WorldToth 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

WorldToth 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

WorldToth 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante