Blog do Adriano Meira - Uma ajudinha para desenvolvedores e web designers. Uma ajudinha para desenvolvedores e web designers.

Validação de campos do formulário com jQuery e Ajax – Plugin validate.js

Olá pessoas recentemente o Allan me perguntou como poderia fazer uma validação de campos de um formulário e envia-los via ajax com o jQuery. Num primeiro momento tentei fazer a validação manual e envio via ajax, mas isso tornaria trabalhoso e sem muito reutilização para outros formulários.

Então decidi mostrar aqui neste post como utilizar o plugin validate.js para fazer a validação dos campos e depois o envio de dados via ajax, lembrando que este é um plugin desenvolvido pelo pessoal da bassistance.de e pode haver divergência na sua versão em relação ao jQuery mais atual.

Vou utilizar o jQuery versão V1.9.1 e o validade.js versão 1.7, abaixo está um exemplo deste envio de dados e download destes arquivos.

Primeiro vamos marcar nosso HTML com alguns campos do formulários, sendo alguns obrigatórios e outros não

<form id="ajax_form">
    <p>
        <label>Nome</label>
	<input type="text" placeholder="Nome" name="nome" value="" />
    </p>
    <p>
	<label>Email</label>
	<input type="text" placeholder="Email" name="email" value="" />
    </p>
    <p>
        <label>Telefone</label>
	<input type="text" placeholder="Telefone" name="telefone" value="" />
    </p>
    <p>
        <label>Assunto</label>
	<input type="text" placeholder="Assunto" name="assunto" value="" />
    </p>
    <p><input type="submit" value="Enviar"></p>
</form>

Agora vamos chamar as bibliotecas de javascript do  jQuery e do Validate

<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>

Agora vamos primeiro fazer a validação do nosso formulário, veja no código abaixo que chamo o ID do meu formulário e pelo “name” dos campos determino quem é obrigatório e que também determino a mensagem de cada “name”, personalizando ela.

<script type="text/javascript">  
    $(document).ready(function(){  
        $('#ajax_form').validate({  

            //regras e mensagens para os campos
            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' }  

            }
        });
    });
</script>

Vamos personalizar um pouco mais estas mensagens, vamos criar uma “div” que receberá todos os dados de validação, ela terá o ID de “mensagens” e nela que receberá os dados de validação dos campos e retorno do nosso ajax.

<div id="mensagens"></div>

Agora no mesmo código de validação acrescente a instrução de errorLabelContainer: $(‘#mensagens’), para determinarmos a DIV onde vai mostrar as mensagens de erro, ficando assim nosso código:

<script type="text/javascript">  
    $(document).ready(function(){  
        $('#ajax_form').validate({

            //regras e mensagens para os campos 
            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' }  

            },

            //Monta a mensagem em uma caixa separada
            errorLabelContainer: $('#mensagens')
        });
    });
</script>

Agora se clicarmos em “enviar” as mensagens aparecerão no lugar da DIV que colocamos acima, você pode personalizar os erros, mais abaixo vou deixar um CSS para o HTML e as mensagens de erros e retorno do ajax.

Agora vamos fazer o envio do Ajax, para isso vamos usar os mesmos códigos que ensinei e outros artigos que você encontra aqui, neste nosso exemplo vamos acrescentar mais uma função que para o submit do formulário e neste ponto colocaremos nosso código ajax, ficando assim:

<script type="text/javascript">  
    $(document).ready(function(){  
        $('#ajax_form').validate({

            //regras e mensagens para os campos 
            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' }  

            },

            //Monta a mensagem em uma caixa separada
            errorLabelContainer: $('#mensagens'),

            //função para enviar após a validação
            submitHandler: function( form ){  
            	var dados = $( form ).serialize();
            	var formulario = $( form );
            	$.ajax({  
            	    type: "POST",  
            	    url: "processa.php",  
            	    data: dados,
            		success: function( data ){
            		alert( data );
            	}
            }
        });
    });
</script>

Note que estou apontando para o arquivo processa.php, aqui você pode fazer uma série de coisas, como enviar dados via e-mail, gravar no banco de dados, gerar uma sessão de PHP,ente outros. Neste nosso exemplo vamos apenas enviar os dados por e-mail, mas você pode salvar no banco de dados ou outras ações de sua aplicação.

//Para quem vai os dados
$dadosPara = "seuemail@doinio.com";

//Monta a mensagem
$mensagem = "Nome: ".$_POST["nome"]."\n";
$mensagem .= "E-mail: ".$_POST["email"]."\n";
$mensagem .= "Telefone: ".$_POST["telefone"]."\n";
$mensagem .= "Assunto: ".$_POST["assunto"]."\n";

//envia os daos
$enviaEmail = mail($dadosPara, "Contato do site", $mensagem);

//checa se foi enviado

if($enviaEmail){
	echo "Enviado com sucesso!";
}else{
	echo "Erro ao enviar, tente novamente";
}

Aqui eu coloquei uma “checagem”, se os dados forem enviados com sucesso sera impresso (echo) uma DIV com a classe sucesso e a informação de sucesso, se não imprime uma DIV com a mensagem de erro. Isso para que no retorno do ajax seja impresso na DIV “mensagens” este retorno.

Bom é isso ai pessoal , até a próxima!

Links:

Página do plugin: http:/http://jqueryvalidation.org/

Exemplos do Plugin: http://jquery.bassistance.de/validate/demo/




Adriano Meira é o criador do blog, trabalha desde 2012 como Webdesigner e hoje formado em design gráfico trabalho para a Brasil na Web e como free-lancer nas áreas de Design para Web (Webdesigner), Design Gráfico, Impressos e criação de marcas.

Comente este artigo você também!

Comentários (7)

  • thiago disse:

    Quando junta a funcao de validar junto com a de enviar.
    Ambas não funcionam!

    O que pode ser?

  • Adriano Meira disse:

    olá Thiago, cara não entendi bem, uma vez que é validado o formulário pelo plugin ele faz o submit e se for via ajax na página que recebe os dados você faz o envio. Coloque ai seu código pra eu dar uma checada para você.

  • Ricardo Gusmão disse:

    Fala Adriano, parabéns pelo Blog ta me ajudando muito. Bem gostaria de uma ajuda neste seu post. Tenho um formulário que eu posso adicionar infinitos campos produtos e quantidade, dúvida como fazer que este script varrer qualquer campo destes? Eu adiciono usando JQuery. Exemplo: http://www.ipera.com.br/riex_os/insere_produto_os.php alem disso ainda vou ter que comprar se não foi selecionado produto igual. 🙁

  • Gil disse:

    Olá. Meu código não está mostrando as mensagens de erro. O que tá acontecendo?

    —– INDEX 1 —–

    $(document).ready(function(){
    $(‘cadastro’).validate({

    //regras e mensagens para os campos
    rules: {
    nome: { required: true, minlength: 2 },
    data: { required: true},
    sex: { required: true },
    endereco: { required: true },
    estado: { required: true },
    cidade: { required: true },
    cep: { required: true },
    pref: { required: true }
    },
    messages: {
    nome: { required: ‘Preencha o campo nome’, minlength: ‘No m�nimo 2 letras’ },
    data: { required: ‘Adicione alguma data’ },
    sex: { required: ‘Selecione ao menos uma op��o’ },
    endereco: { required: ‘Adicione um endere�o’ },
    estado: { required: ‘Escolha uma op��o’ },
    cidade: { required: ‘Escolha uma op��o’ },
    cep: { required: ‘Digite um CEP v�lido’ },
    pref: { required: ‘Escolha ao menos uma prefer�ncia’ }

    },

    //Monta a mensagem em uma caixa separada
    errorLabelContainer: $(‘#mensagens’),

    //função para enviar após a validação
    submitHandler: function( form ){
    var dados = $( form ).serialize();
    var formulario = $( form );

    $.ajax({
    type: “POST”,
    url: “confirmacao.php”,
    data: dados,
    success: function( data ){
    alert( data );
    }
    });

    return false;
    }
    });
    });

    <font face="Segoe UI" Cadastro Pessoal

    Nome

    Data de nascimento:

    Sexo:
    Feminino
    Masculino

    Endere�o:

    Estado:

    Selecione
    Acre
    Alagoas
    Amap?
    Bahia
    Cear?
    Distrito Federal
    Esp?rito Santo
    Goi?s
    Maranh?o
    Mato Grosso
    Mato Grosso do Sul
    Minas Gerais
    Par?
    Para?ba
    Paran?
    Pernambuco
    Piau?
    Rio de Janeiro
    Rio Grande do Norte
    Rio Grande do Sul
    Rond?nia
    Roraima
    Santa Catarina
    S?o Paulo
    Sergipe
    Tocantins

    Cidade:

    Selecione
    Palmas
    Porto Nacional
    Para?so
    Miracema
    Miranorte
    Jalap?o

    CEP:

    Prefer?ncias:
    Academia
    Design
    Esportes
    Filmes
    Livros
    Sa?de
    Tecnologia

    —– CONFIRMAÇÃO —–

    <?php
    echo "Resultados.”;
    $mensagem = “Nome: “.$_POST[“nome”] . “\n”;
    $mensagem .= “Data de nascimento: “.$_POST[“data”] . “\n”;
    $mensagem .= “Endere�o: “.nl2br($_POST[“endereco”]). “\n”;
    $mensagem .= “Estado: “.$_POST[“estado”] . “\n”;
    $mensagem .= “Cidade: “.$_POST[“cidade”] . “\n”;
    $mensagem .= “CEP: “.$_POST[“cep”] . “\n”;

    echo “Prefer�ncias: “;
    foreach ($_POST[“pref”] as $pref) {
    $mensagem .= $pref. ” “;
    }
    ?>

  • Arthur Warmling disse:

    Opa, bom dia Adriano, muito bom o tutorial.
    Uma pequena dúvida. Caso eu queria fazer isso em um campo de Login. Como eu faria para mostrar que o login ou senha estão errados? Sem precisar ir para outra página?

    Obrigado!

  • Adriano Meira disse:

    Olá Arthur

    Cara desta forma eu faria o seguinte, no arquivo que faz a checagem do login eu colocaria uma resposta “ok” para login correto e “erro” para se der errado. Daí na função de Ajax onde tem o parâmetro “success:” faria um “if” para checar o retorno (no exemplo desta postagem o valor”data”).

  • Jonas Furlan disse:

    Oi Adriano, achei perfeito este teu formulário, fácil de implementar, vou usar em todos os meus projetos. A única dúvida que eu tenho é: como colocar um efeito hover no botão enviar?

    Tive que fazer uma alteração para inserir um ícone.

    Se puder dar uma ajudinha nisso, fico agradecido.

    Segue o link http://neows.com.br/novo/contato.html

    Abraço.

Publicidade e outros

Marcadores de Página Magnético

 

Leia e Liberte pelo BookCrossing.com ...