Validar e enviar formulário com ajax, usando jquery.validate

Bom, o motivo deste post, é para tentar acabar com os franksteins que tenho visto.

O cara vê jQuery, acha legal. Resolve começar a usar.

Tudo bem até aqui, se ele não tivesse feito essa escolha, antes de aprender a programar, o mínimo de Javascript Puro e Básico primeiro.

Ai ele descobre os plugins, e como todo bom iniciante, fica maravilhado com oque falam sobre ajax.

Resolve então juntar um plugin de validação com o envio do form em ajax. Acontece que ele não pesquisou e nem foi instruído sobre a melhor forma de fazer isso.

Daí começam os problemas, erros, bugs.. e rondando blogs e mais blogs.. quase frustado, começam as gambiarras.

Basta usar o metodo do plugin, o submitHandler, não se esquecendo de mandar um return false; para impedir que o comportamento HTML do formulário seja seguido.

<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$('#ajax_form').validate({
			rules: {
				nome: { required: true, minlength: 2 },
				email: { required: true, email: true },
				telefone: { required: true }
			},
			messages: {
				nome: { required: 'Preencha o campo nome', minlength: 'No mínimo 2 letras' },
				email: { required: 'Informe o seu email', email: 'Ops, informe um email válido' },
				telefone: { required: 'Nos diga seu telefone' }

			},
			submitHandler: function( form ){
				var dados = $( form ).serialize();

				$.ajax({
					type: "POST",
					url: "processa.php",
					data: dados,
					success: function( data )
					{
						alert( data );
					}
				});

				return false;
			}
		});
	});
	</script>
</head>
<body>
	<form method="post" action="" id="ajax_form">
		<label><input type="hidden" name="id" value="" /></label>
		<label>Nome: <input type="text" name="nome" value="" /></label>
		<label>Email: <input type="text" name="email" value="" /></label>
		<label>Telefone: <input type="text" name="telefone" value="" /></label>

		<label><input type="submit" name="enviar" value="Enviar" /></label>
	</form>
</body>
</html>

processa.php

<?php
	ini_set('display_errors', true);
	error_reporting(E_ALL);

	if( $_SERVER['REQUEST_METHOD']=='POST' )
	{
		if( !getPost('id') )
		{
			//significa um INSERT
			$sql = "INSERT INTO `tabela` (`id`, `nome`, `email`, `telefone`)
				VALUES
				(NULL, '".getPost('nome')."', '".getPost('email')."', '".getPost('telefone')."')";

		}
		else
		{
			//significa um UPDATE
			$sql = "UPDATE `tabela` SET `nome` = '".getPost('nome')."',
				`email` = '".getPost('email')."',
				`telefone` = '".getPost('telefone')."'
				WHERE `id` = ".getPost('id');
		}
		echo $sql;//executar a query

	}
	function getPost( $key ){
		return isset( $_POST[ $key ] ) ? filter( $_POST[ $key ] ) : null;
	}
	function filter( $var ){
		return $var;//faça o tratamento
	}
?>

O interessante, agora é notar que se for um UPDATE, os campos estarão preenchidos:

		<label><input type="hidden" name="id" value="15" /></label>
		<label>Nome: <input type="text" name="nome" value="Bruno" /></label>
		<label>Email: <input type="text" name="email" value="email@provedor.com" /></label>
		<label>Telefone: <input type="text" name="telefone" value="(11) 1234-5678" /></label>

E então nesse caso, a resposta será:

UPDATE `tabela` SET `nome` = 'Bruno',
				`email` = 'email@provedor.com',
				`telefone` = '(11) 1234-5678'
				WHERE `id` = 15

96 Comments

  1. simplesmente Show

  2. Valeu demais pelo post.

    Esse eu não conhecia : $( form ).serialize();

  3. Segui seu exemplo e os campos do formulário não são limpos após o envio para a pagina que processa os dados.

    Alguma luz para poder clarear as ideias aqui ?

  4. Opa, obrigado por responder tão rapido 🙂
    Eu segui a orientação, mas não está ocorrendo como esperado:

    success: function( data ) {  
        alert( data );  
        $("input[name='nome']").val( '' );
        $("input[name='email']").val( '' );
        .... (outros campos);
    }

    Tentei também antes de abrir a chave, ai limpa, mas não envia os dados.

    Alguma ideia de onde posso estar errando ?

    • Oi @Cabeção,

      Acabei de testar, e funciona perfeitamente. Não sei oque vc está errando.

      Abraços.

      • como eu valido esse codigo aqui

            
         $(function() {
        //twitter bootstrap script
         $("button#submit").click(function(){
            $.ajax({
            		   type: "POST",
         url: "process.php",
         data: $('form.contact').serialize(),
                 success: function(msg){
                   		  $("#teste").html(msg)
                   		  $("input[name='email']").val( '' );
                   		  $("input[name='password']").val( '' );
                   		 //$("#form-content").modal('open'); 
                  
                 },
         error: function(){
         alert("failure");
         }
               });
         });
        });
        
  5. Refiz tudo aqui, e passou a funcionar como esperado, não imagino onde poderia estar o erro.

    Muito obrigado pela atenção.

  6. e como estilizar essas mensagens que aparecem? porque para mim aparecem desordenadas pela tela toda

  7. Ótimo POST…
    Desculpa a ingenuidade…mas qual ao usabilidade das funções getPost e filter?…

    No retorno da confirmação do envio de dados via ajax, apenas que retorna que foi enviado os dados para a pagina php, ou o tramtamento dos dados?
    E se ocorrer problema no carregamento da pagina php que recebe os dados.

    Atenciosamente, Karlos.

  8. Ótimo post. Foi de grande valia.

    Obrigado

    Abs e sucesso

  9. cara vc salvo minha vida, uhauhauha

  10. Ótimo Post!
    Queria saber se há como configurar para as mensagens de validação aparecerem em uma DIV abaixo das de todos os campos… Assim eu não ‘desformato’ meu formulário com as mensagens que aparecem após os inputs…

    Alguém sabe?

    Obrigada,

    • Oi Aline, é possível sim.

      Note as classes css .error que o plugin coloca nas mensagens. Use elas e estilize com CSS da forma que vc precisar.

      []s!

  11. Vinícius Gomes

    maio 16, 2012 at 18:15

    Boa noite! Eu fiz toda configuração do plugin e a validação está ok, porém na hora que clico no botão nada acontece. Testei o exemplo e nele funciona, abre um alert com a query SQL. O que pode estar acontecendo? O que devo analizar?

  12. Vinícius Gomes

    maio 17, 2012 at 01:29

    Continuo aqui testando e nada! Ele valida, mas não tenho retorno e ele não insere no banco! Fico grato se puder dar uma força. Obrigado!

  13. Vinícius Gomes

    maio 31, 2012 at 17:04

    Tem um erro em:
    Erro: $ajcarousel is not defined
    Arquivo-fonte: http://localhost/balonismoembrasilia/javascript/Basico.js
    Linha: 157

    Será que pode ser este o problema? Algum conflito?

  14. Anderson Cardozo

    junho 18, 2012 at 19:48

    Uso para fazer a conexão com banco de dados, Wamp, esta dando o seguinte erro o que faço?
    Undefined index: REQUEST_METHOD in D:\wamp\www\teste\cadastro\_Temp.php on line 10

    $conexao = mysql_connect("localhost", "root", "") or die(mysql_error());
    
    mysql_select_db("cadastro", $conexao);
  15. Oláa, então eu peguei um formulario jquery em um site,
    mas queria saber qual código posso colocar para enviar os dados inseridos seja enviado para o meu próprio e-mail.
    Se puder me ajudar 😀
    Obrigada!

  16. me add no msn, pra voc tentar me ajudar, por favpr ? 😀

  17. Cara nota 10, sempre procurei isso e realmente esbarrei no que vocễ falou, se tivesse olhado a documentação como manda a regra, veria esta opção do plugin. Obrigado e abraços!

  18. Cara vc é 10!!! ótimo post, parabéns!!!

  19. Vinicius Rodrigues

    outubro 2, 2012 at 13:34

    Muito bom exemplo Bruno.
    Parabéns…..

  20. Muito bom! Matou a minha duvida!! Obrigado

  21. Prá ficar perfeito teria como alguém ajudar a implementar uma verificação do tipo “remote” para ver se o registro já existe.
    Seria algo assim: Não existindo o “nome”, grava. Se já existir, teria como mostrar o campo NOME (vindo da tabela que foi pesquisado)?
    Não consegui fazer. Se alguém puder ajudar agradeço / abraço a todos!

  22. Olá Bruno, parabéns pelo trabalho !
    Estou utilizando seu exemplo acima mas estou com dificuldade em tratar o redirecionamento. Na linha do alert substitui da seguinte forma:

     if (data == ""){ 
        $('#avisos').css({"width":....});
        $('#avisos').html("OK").delay(2000).slideUp("fast");
        var href = aqui é o problema, preciso alterar o conteudo da div
        $('#div').load(href);
    

    Você pode me ajudar ?

  23. wbruno, um help…
    Queria usar o jquery.validate e o $(‘#form’).submit(function(){, mas não estou entendedo como fazê-los em conjunto…
    Vi que no seu exemplo tem algo parecido com o que preciso, mas ainda nao encaixou…!
    Quero usar o validate para validar os input text do form e o submit para usar o $.post do jquery também… usando para mysql query…

    Vou colocar um pouquinho do código de exempo aqui e se puder, pode dar uma ajuda por favor ?
    Aqui vai…
    Tenho o seguinte:

    $(document).ready(function(){
    	$('#form').validate({
               ... aqui tenho... rules e messages...
            });
            $('#form').submit(function(){
               .... aqui tenho variaveis recebendo os input text...
               $.post('lista_tabela.php',
                    ...aqui tenho + variaveis e o retorno...
                    function(data){ $('#verifica').html(data); },
        	  'html');
             });

    No html tenho:

    as e
    e um botão…

    Quando preencho incorreto ou não preencho o form, não passa pelo validate e somente pleo submit…
    As duas declarações estão independentes, mas já as coloquei uma dentro da outra e também não funcionou o validate…
    Até no final do validate inclui o submitHandler: function( form ){ para lá dentro colocar a parte do $(‘#form’).submit(function(){, mas também não funcionou o validade…
    Qual é a besteira que estou fazendo ou o que não estou fazendo ?

    Obrigado

  24. Então cara…
    Segui esse tutorial, mas os erros não aparecem como o esperado.
    Se eu envio o formulário faltando algum dos campos “required”, não aparece mensagem alguma.
    As únicas mensagens que aparecem são de quando vc digita um e-mail inválido, ou uma quantidade de caracteres pequena demais.
    Tem noção do que pode ser isso?

  25. Duvida, se dentro do submithandler eu envio para o ajax e este me retorna uma informação do tipo “nome de usuario ja cadastrado no banco”, o botão de submit passa a não funcionar mais.

    Help me!

    • Vc já deveria ter validado isso =) simples assim.
      Outro ajax para validar as suas dependencias, antes do submit. O proprio validate já tem um método para isso. Veja na documentação o remote

  26. Muito boa e simples essa validação.. Valeu!!

  27. Vítor Nunes

    junho 4, 2013 at 16:51

    Tu é fera.. pena que não entendo 1/3 do que vc escreve.. (:

  28. Depois de 2 dias a partir a cabeça com isto, este código funcionou à primeira!

  29. Olá a todos! E como ficaria a url da requisição ajax? pois cada form manda para uma url diferente, como eu corrijo isso?

    grato!

  30. VC é o cara Bruno, valeu mesmo!

  31. Clayton lotar

    julho 3, 2013 at 16:47

    Parabéns me ajudou em detalhe

  32. Bruno,
    Meu provedor utiliza o formMail.
    Posso indicar no campo action do formulário o endereço do arquivo de validação server-side do provedor, tipo assim:
    action=”http://www.dominio.com.br/cgi-bin/FormMail.pl”?

    E no código a parte abaixo como ficaria:

    $.ajax({
    	type: "POST",
    	url: "processa.php",
    	data: dados,
    	success: function( data )
    	{
    		alert( data );
    	}
    });
    
    • troque:

      url: “processa.php”,

      por:

      url: “http://www.dominio.com.br/cgi-bin/FormMail.pl”,

      e pronto.

      • Obrigado pela presteza Bruno,

        Agora tenho outra dúvida. Utilizo utf8 em minhas páginas e ao receber o email não há acentuação e sim caracteres.
        Como tratar isso?

  33. E se o nome do meu “name” é uma variável como eu procedo ?

  34. Maks Agostini

    agosto 19, 2013 at 22:22

    Willian, para ao invés de somente carregar o aviso do script de envio, eu redirecionar o visitante para uma página após a validação e envio, como faço?

  35. Felipe Ribeiro

    agosto 27, 2013 at 11:09

    Ótimo o script, muito funcional.

    Eu to com uma pequena dúvida, se eu alterar os parametros abaixo
    url: “processa.php”

    para

    url: “http://www.meusite.com.br/processa.php”

    ou seja, com a URL absoluta ele não funciona, será que é algum tipo de configuração?

  36. Primeiramente meus parabéns pelo Post, me ajudou muito, só estou com problema na valitação de inputs radios, como eu posso tá aplicando neles… tem como vc me ajudar nessa parte?

  37. Evandro Oliveira

    outubro 4, 2013 at 09:01

    Deus que ajude, resolveu meu problema!

  38. Danillo dos Santos Pereira

    outubro 30, 2013 at 19:28

    Eu implementei o seu codigo Navegação sem refresh – carregando conteúdo com ajax em div 2 mais quando clico no submit ele volta para pagina inicial do projeto não fica na pagina do formulário… a pagina sozinha funciona mas quando em conjunto acontece isso. pode me ajudar

  39. Cara valeuuu eu estava fazendo merda ahuahua desculpe pela amolação e muito obrigado pelas dicas era um “{” mal colocado acredita ? kkk Parabéns só tenho a agradecer foi o único local esclarecedor o suficiente pra mim fazer o que eu queria obrigado mesmo

  40. Vey te amo cara kkkk

  41. Patrick Pichnoff

    janeiro 18, 2014 at 20:19

    Ótimo post ! Adaptei o código para uma aplicação de abertura de chamados em que na abertura do novo chamado o sistema consulta se já existe um chamado aberto daquele cliente, só que eu gostaria de exibir uma mensagem em que o atendente pudesse escolher entre exibir o chamado aberto anteriormente ou prosseguir com a abertura. Você pode me ajudar ?

  42. Rafael Christofano

    fevereiro 27, 2015 at 10:33

    Bom dia Bruno, achei interessante seu post.. Vi que todos conseguiram fazer fucnionar, mas estou com um problema.. Meu provedor fornece um link para eu postar os dados do formulário. Então alterei seu scrpit para
    url: “http://i.webenviador.net/inscrever2.php”.

    Ao clicar no botão enviar nada acontece, a pagina fica estatica. Não da erro, simplesmente não encaminha para o arquivo .php.

    você sabe o que pode ser?

    • Ajax não trabalha crossdomain. Quando vc informa uma URL completa, vc está violando o domínio e será bloqueado pelo navegador.
      O erro vai aparecer no console de erros, aperte Ctrl + Shift + J no Firefox ou Chrome.

      • Rafael Christofano

        fevereiro 27, 2015 at 15:14

        Ok, Bruno, obrigado por respoder!! Mas então, qual a solução devo fazer para enviar os dados para esse arquivo que está no meu provedor, sem dar um refresh na pagina?

  43. Olá.

    Muito legal a sua explicação, eu estava tentando com remote e não consegui de jeito nenhum!!! bom a minha dúvida é a seguinte:
    Ele verifica em um arquivo php, se o usuário não está cadastrado ele cadastra e mostra a msg de sucesso, se o usuário está ele mostra o erro. Porém os dois avisos mostram no alert. Como faço para depois que o php retorna True ele redirecionar a pessoa? mas somente no true já que o false é porque já existe o usuário.

  44. Ola WBruno, muito bom seu post, funciona perfeitamente, só queria tirar uma duvida como eu faço pra zerar um combobox?

  45. Nossa esse código salvou minha vida, só posso tirar uma dúvida? Como faço para a mensagem de sucess aparecer em uma label ao lado do botão por exemplo?

    =)

  46. Excelente post Bruno!

    Simples e objetivo! Resolveu meu problema com formulário!

  47. Bom dia
    Nao consigo inserir dados ele valida mas não grava no banco. alguma dica por favor

    Obrigado

  48. Olá, tenho uma questão aqui: quero fazer um redirecionamento tipo (mesmo com o refresh):

    $.ajax({
    	type: "POST",
    	url: "processa.php",
    	data: dados,
    	success: function( data )
    	{
    
            document.location.href = “comprovante.html”;
    
    		/*alert( data );*/
    
    
    	}
    });

    Porém na página comprovante.html quero pegar os dados do post. É possível?

    Obrigado

  49. Estou com o mesmo problema do Leonardo.
    A função valida os campos mas não grava no BD.
    Se o formulário é preenchido corretamente, os dados são gravados corretamente no BD.
    Caso o “validate” acuse algum erro no preenchimento de um campo (ou mais), este campo após ser preenchido corretamente não tem seu valor gravado no BD =O.
    Estou utilizando o $(#myform).click(function()…

    Vlw e Grande abraço!!

  50. Parabéns pelo post….Muito bom…

  51. Bruno, excelente esse post.

    Você poderia explicar como usar o método remote para validação de captcha ? Estou precisando muito.

    Obrigado!

  52. Bruno, se eu precisasse usar o validate num select, como seria? Não consegui aqui.

  53. Oi, só o update que não funcionou aqui, mesmo com os campos cheios ele faz um novo insert ao invez de entrar no update

  54. Olá,

    Muito top!!

    Como faço para a Mensagem seja exibida em uma div?

    Obrigado
    Patrick

  55. adorei, ajudou-me bastante

  56. Olá,

    Primeiramente gostaria de saber se usar submitHandler ainda é a melhor saída, pois o post é um tanto antigo e vai que criaram algo ainda melhor.

    Outra questão… E eu tenho um botão cadastrar, que realiza o INSERT dos dados pela primeira vez e outro salvar, usado para realizar UPDATE dos dados após uma edição. Ambos devem validar o form antes de submetê-lo. É possível fazer algum tipo de sobrecarga do submitHandler ou terei que trabalhar com blocos ajax aninhados com ifs e elses?

  57. Boa tarde. Eu escondo alguns inputs e exibo outros de acordo com alguns parâmetros do meu projeto. Eu gostaria de validar campo em branco de inputs não ocultos, como eu faço isso? é possível?

  58. Aprendiz - CE

    abril 6, 2016 at 19:50

    Antes de mais nada, parabéns pelo post.
    Agora, seguindo a sua técnica… como ficaria o “delete” dentro do script “processa.php”? Ou seja, como “interceptar” que o “id” passado é para deletar ou alterar?

    Grato e aguardo pelo seu comentário.

  59. Bruno, não conheço muito php e um jquery, o código funcionou porem queria saber como faço para enviar as resposta para meu e-mail.

  60. Opa, cara, preciso validar antes de salvar se exemplo o email já existe, como poderia fazer essa validação?

  61. Alguém me ajuda.
    Envio o form ele não da refresh na página blz, mas após o envio preciso preparar o form novamente com uma outra informação.

    Tenho um input no form que precisa ser atualizado a cada submit, e não posso dar refresh na página.
    Esse input é populado por um array, a cada submit do form ele precisa passar para o próximo item desse array…

    Alguém tem alguma sujestão?

  62. Não entendi, como eu faço pra enviar os dados que o visitante digitou no formulário pro meu e-mail? 🙁

  63. Opa!
    A validação não está funcionando amigo… Ou eu não soube implementar kkks Está dando reflash na página ainda…

                jQuery('document').ready(function () {
                    jQuery('#ajax_form').validate( {
                        rules: {
                            email: {required: true, email: true},
                            nomeCompleto: {required: true, minlength: 2},
                            apelido: {required: true, minlength: 2},
                            senha: {required: true, minlength: 5},
                            senhaConfirmacao: {required: true, minlength: 5}
                        },
                        messages: {
                            email: {required: 'Informe o seu email', email: 'Ops, informe um email válido'},
                            nomeCompleto: {required: 'Preencha o campo nome', minlength: 'No mínimo 2 letras'},
                            apelido: {required: 'Preencha o campo apelido', minlength: 'No mínimo 2 letras'},
                            senha: {required: 'Preencha o campo senha', minlength: 'No mínimo 5 letras'},
                            senhaConfirmacao: {required: 'Preencha o campo de Confirmação de Senha', minlength: 'No mínimo 5 letras'}
                        }
                 
                    });
                     jQuery('#ajax_form').submit(function () {
                          var dados = jQuery(form).serialize();
    
                            jQuery.ajax({
                                type: "POST",
                                url: "RegistroDeUsuarios.php",
                            data: dados,
                            success: function (data)
                            {
                                alert(data);
                            }
                        });
                        return false;
                    });
                });
            
    
  64. Como faço para fazer a validação sem dá refresh na pagina?

  65. Olá Bruno,

    Quando tentei usar esse script com um input type “file” para enviar uma foto,
    ele passou o valor desse input vazio.
    Tem alguma forma de enviar um input “file” usando esse script?

Deixe uma resposta

Your email address will not be published.

*