[Resolvido] Esconder botão "submit" do formulario quando

[JCMais 75]

Olá gente, estou criando um formulário de contato PHP com Ajax e JQuery.

No meu arquivo de validação eu coloquei o seguinte comando:

errorPlacement: function(error, element) {
			$('span.error-explain').append(error);
			element.effect('shake', { times: 3, distance: 5 }, 100);
		},

Mas afinal o que isto faz? Quem já validou formulários com JQuery sabe que este código insere os erros do formulário dentro do elemento

span.error-explain

e então aplica o efeito

('shake', { times: 3, distance: 5 }, 100)

ao elemento que está com erro.

 

O que eu estou tentando fazer é que, ao acontecer qualquer erro o botão e enviar

input[type="submit"]

fique oculto, e só volte a aparecer quando não tenha mais erros no formulário.

Eu tentei adicionar isto ao código acima:

if($('span.error-explain').is(':visible')) {
				$('input[type="submit"]').hide();
			}
			else {
				$('input[type="submit"]').show();
			}

Mas o problema é que ele apenas funciona uma única vez, ou seja, se oculta quando ocorre o primeiro erro no formulário, mas não volta a ser exibido quando não tem mais erros.

 

Creio que isso seja por causa que os erros são gerados por meio de Ajax, e o código que eu inseri não funciona para elementos adicionados após a execução do mesmo.

 

Nesse caso teria que usar algo como

live()

, porém, ele só funciona com eventos. :(

 

Qual a solução para isto?

[Eliseu M. 2]

Eu não sei bem como o seu formulário está, mas acho que uma variável de controle poderia ajudar.

[JCMais 75]

Eu não sei bem como o seu formulário está, mas acho que uma variável de controle poderia ajudar.

 

Como funcionaria esta variável?

 

O meu formulário se encontra na seguinte situação:

 

Contact.php http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Main.js http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Process.php

 

O arquivo contact.php é onde se encontra os campos de inserção de dados e o resto do html da página, o arquivo main.js contém as funções de validação e a função para enviar o formulário via ajax para o arquivo process.php, que processa os dados enviados e me envia por e-mail.

 

A configuração básica do meu arquivo Main.js é a seguinte:

 

$(document).ready(function() {
	$('#ContactForm').validate({
		debug: true,
		errorContainer: "span.error, span.error-explain", //Quando ocorre um erro, estes elementos são exibidos
		errorElement: "em", //Os erros são tratados como 'em'
		wrapper: "li", //Os erros são atribuidos dentro de do elemento 'li'
		errorPlacement: function(error, element) {
			$('span.error-explain ul').append(error); //Gera o erro
//Aqui é onde eu coloquei um código para tentar, mas como disse, funciona apenas um vez
			if($('span.error').css('display')=='none') {
				$('input[type="submit"]').hide();
			}
			else {
				$('input[type="submit"]').show();
			}
//Fim do codigo não dá certo
			element.effect('shake', { times: 3, distance: 5 }, 100); //Efeitozinho legal :)
		},
		rules: {
			//Aqui ficam as regras dos campos, não tem importancia mostrar aqui. ^^
		},
		
		messages: {
			//Aqui ficam as mensagens de erro, não tem importancia mostrar aqui. ^^
		},
		
		onkeyup: false,
		
		submitHandler: function(form) {
		
			var content = $(form).serialize();
			
			$(form).find('input[type="submit"]').after('<img src="/imgs/ajax.gif" alt="Enviando Formulário" id="loaderImage" title="Enviando Formulário" style="margin: 0 0 12px 10px;" />');
			
			$.post("process.php", { content: content }, function(data) {
			
				$('#loaderImage').remove();
			
				if(data == "pass") {
					$(form)[0].reset();
					$(form).find('input[type="submit"]').fadeOut(function() {
						$(form).append('<div class="notification success"><div>O seu e-mail foi enviado com sucesso</div></div>').children('.notification').hide().fadeIn();
					});
				} else if(data == "fail") {
					$(form).find('input[type="submit"]').fadeOut(function() {
						$(form).append('<div class="notification error"><div>O seu e-mail não pode ser enviado</div></div>').children('.notification').hide().fadeIn();
					});
				}
			
			});
			
			return false;
			
		}
	});
	
});

 

[William Bruno 1501]

Cara, roda isso:

<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("form#contact").validate({
		rules: {
			nome: { required: true },
			telefone: { required: true },
			email: { required: true, email: true }
		},
		messages: {
			nome: { required: 'Preencha o campo' },
			telefone: { required: 'Preencha o campo' },
			email: { required: 'Preencha o campo', email: 'Digite um email válido' }
		},
		invalidHandler: function(form, validator){
			//for( prop in validator ) $('#test').append( prop+'<br />' );
			$("#ok").attr({disabled: 'disabled'});
		},
		onkeyup: function( element ){			
			if( this.errorList.length==0 )
				$("#ok").removeAttr('disabled');
		}
	});
});
</script>
</head>
<style type="text/css">
label { display: block; }
label.error { font-size: 11px; color: #f00; }
</style>
<body>
	<form action="" method="post" id="contact">
		<label>Nome: <input type="text" name="nome" /></label>
		<label>Telefone: <input type="text" name="telefone" /></label>
		<label>Email: <input type="text" name="email" /></label>
	
	
		<input type="submit" name="ok" value="ok" id="ok" />
	</form>
	<div id="test"></div>
</body>
</html>

não consegui achar um método do plugin melhor para retirar o disabled do submit

[JCMais 75]

William Bruno, muito obrigado pela ajuda. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

 

Estudei o código que você passou, e eu apenas adicionei a seguinte parte ao meu código:

onkeyup: function( element ){                   
			if( this.errorList.length>=1 ){
				$('input[type="submit"]').attr({disabled: 'disabled'});
				$('input[type="submit"]').slideUp();
			}
			else {
				$("input[type='submit']").removeAttr('disabled');
				$('input[type="submit"]').slideDown();
			}
		},

 

Muito Obrigado, pode fechar este tópico.