jquery.validate dados

[PHP_desenvolvimento 2]

Olá pessoal bom dia,

 

Estou aprendendo a desenvolver um formulário em jquery, e quero saber como fazer para pegar os dados depois que foram validados. Já fiz algumas consultas mas não entendi a forma de receber os dados, segue o código para auxilio. Neste script logo abaixo não está emitindo o alerta como deveria ser:

 

<script type="text/javascript">
$(document).ready(function(){
		$('#formulario').validate({
			
			submitHandler: function( form ){
				var dados = $( form ).serialize();
 
				$.ajax({
					type: "POST",
					url: "processa.php",
					data: dados,
					success: function( data )
					{
						alert( data );
					}
				});
 
				return false;
			}
		});
	});
</script>

HTML

 <form action="" method="post" id="formulario" name="form1" class="validate">
                <p>
                    <label>NOME COMPLETO</label>
                    <input type="text" name="txtNome" id="nome" class="required" minlength="8" />
                    <span>Preencha seu nome completo.</span>
                </p>
                <p>
                    <label>CPF</label>
                    <input type="text" name="txtNascimento" id="nascimento" class="required cpf" />
                    <span>Preencha o campo com o seu CPF.</span>
                </p>
                <p>
                    <label>DATA DE NASCIMENTO</label>
                    <input type="text" name="txtNascimento" id="nascimento" class="required data" />
                    <span>Preencha o campo com sua data de nascimento.</span>
                </p>
                <p>
                    <label>ENDEREÇO</label>
                    <input type="text" name="txtEndereco" id="endereco" class="required" />
                    <span>Preencha o seu endereço</span>
                </p>
                <p>
                    <label>TELEFONE</label>
                    <input type="text" name="txtTelFixo" id="fixo" class="required fone" />
                    <span>Preencha com fixo ou celular</span>
                </p>
                <p>
                    <label>E-MAIL</label>
                    <input type="text" name="txtEmail" id="email" class="required email" />
                    <span>Preencha seu email</span>
                </p>
                <p>
                    <label>PROFISSÃO</label>
                    <input type="text" name="txtProfissao" id="profissao" />
                </p>
                <p>
                    <label>ESTADO CIVIL</label>
                    <select name="txtEstadoCivil" id="estadoCivil">
                        <option value="0">Escolha</option>
                        <option value="1">Solteiro</option>
                        <option value="2">Casado</option>
                    </select>
                </p>
                <p>
                    <input type="submit" name="Enviar" class="button">
                </p>
            </form>

 

Alguem poderia me ajudar como pegar os dados desse formulario e passar para o processar.php ?

[William Bruno 1501]

já está sendo enviado para o processa.php

 

aperte Ctrl + Shift + J no Firefox e veja se tem algum erro no console.

 

Leia:

 

http://wbruno.com.br/javascript-puro/como-debugar-javascript-firefox-erros-comuns/

http://wbruno.com.br/ajax/como-debugar-ajax-firebug/

[elmano.neto 9]

Como o William falou, já está sendo enviado.

Para recuperar no processa.php, você pode usar $_POST.

[PHP_desenvolvimento 2]

E como faço para ter um retorno dessa mensagem?

[William Bruno 1501]

é só vc dar um echo lá no processa.php

 

vc leu os links q mandei ? lá ensina como debugar e como verificar oq tá retornando.

[PHP_desenvolvimento 2]

Sim está dando erro na de chamar a função validate, segue o erro:

 

TypeError: $(...).validate is not function

 

E dando o echo no processar.php não me retorna os valores por isso minha dúvida ! Se tem algo de erro no código javascript

[William Bruno 1501]

para sabermos se tem algo errado, vc tem q nos informar o erro :lol:

 

agora q vc disse, eu posso te dizer: faltou vc importar o plugin jquery.validate.js

 

 

mas como vc não tá validando, e só tá enviando um ajax, vc não precisa dele, e pode usar apenas assim:

http://wbruno.com.br/ajax/enviar-formulario-para-php-sem-refresh-jquery-ajax/

 

a única diferença é q removi a dependência do validate.

[PHP_desenvolvimento 2]

Blz dessa forma resolveu ! Obrigado pela dica !

 

 

Olá bom dia, Voltando a abrir a discussão pelo fato de ter dado certo o envio dos dados via Ajax, mas como fazer para só ser enviado o formulário quando todos os campos do jquery.validated for enviado. Dá forma que está agora vai sendo enviado quando aperta o botão de submit. Segue como está o código agora

 

 

<script type="text/javascript">jQuery(document).ready(function(){		jQuery('#formulario').submit(function(){			var dados = jQuery( this ).serialize(); 			jQuery.ajax({				type: "POST",				url: "processa.php",				data: dados,				success: function( data )				{					alert(data);				}			});						return false;		});	});</script>

E tem como enviar a mensagem de sucesso via innerHTML?

[William Bruno 1501]

tem sim, só trocar o alert por innerHTML

 

e fazer a validação antes de fazer o ajax. Um simples if.

[PHP_desenvolvimento 2]

Certo mas se está fazendo a validação via jquery.validated como ficar meu script?

[William Bruno 1501]

Ai ficaria exatamente assim:

 

http://wbruno.com.br/jquery/validar-enviar-formulario-ajax-usando-jquery-validate/

[PHP_desenvolvimento 2]

Certo está validando só que dessa forma não está agora passando os dados via POST Ajax alguma coisa está errada ? Valida todos os campos mas não envia o formulário.

 

jQuery(document).ready(function(){
		$('#formulario').validate({
			rules: {
				nome: { required: true, minlegth: 10 },
				cpf: { required: true, cpf: true },
				nascimento: { required: true, data: true },
				endereco: { required: true, minlegth: 10 },
				telefone: { required: true, fone: true },
				profissao: { required: false },
				estadoCivuk: { required: false },
				email: { required: true, email: true },
				convertido: { required: true, numeric: true }
			},
			submitHandler: function(form){
				var dados = jQuery( this ).serialize();
 
				$.ajax({
					type: "POST",
					url: "processa.php",
					data: dados,
					success: function( data )
					{
						alert(data);
					}
			});
			
			return false;
			}
		});
	});

[William Bruno 1501]

o THIS ai aponta para o validate e não para o form. Vc não precisava ter trocado, era só deixar como tava lá no meu blog.

 

Troque:

 

var dados = jQuery( this ).serialize();

 

por:

 

var dados = $( form ).serialize();

[PHP_desenvolvimento 2]

Dessa forma acontece a mesma coisa valida mas não envia !