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!
Página do plugin: http:/http://jqueryvalidation.org/
Exemplos do Plugin: http://jquery.bassistance.de/validate/demo/
Tweet |
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. 🙁
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. ” “;
}
?>
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!
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.
Quando junta a funcao de validar junto com a de enviar.
Ambas não funcionam!
O que pode ser?