Validação de Formulários com JQuery
Olá, em um outro post eu disponibilizei uma função javascript/jquery para validar campos de formulários, consegui um tempo para melhorar o script e escrevi um plugin simples para JQuery, as funções são praticamente as mesmas porém melhoradas e mais simples de utiliza-las. Nem vou falar muito, abaixo os links, veja se lhe interessa.
Ajude a melhor o script informando os erros e não se esqueça de colocar códigos no pastebin quando for comentar.
Exemplo de uso:
</pre> <!DOCTYPE html> <html> <head> <title>Validate Plugin</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.validate.js" type="text/javascript"></script> <link href="css/validate.css" type="text/css" media="screen" rel="stylesheet" /> <!--[if lte IE 7]> <link href="css/validate_ie7.css" type="text/css" media="screen" rel="stylesheet" /> <![endif]--> </head> <body> <div id="wrap"> <form id="f1" class="validate" action="" method="post" > <p> <label>Combo:</label> <select name="combo" id="combo" class="required"> <option value="">Selecione um item na lista</option> <option value="0">AA</option> <option value="1">BB</option> </select> <span>Selecione um item</span> </p> <p> <label>Nome:</label> <input type="text" name="nome" id="nome" class="required" minlength="5" /> <span>Informe seu nome completo</span> </p> <p> <label>Telefone:</label> <input type="text" name="fone" id="fone" class="required fone" /> <span>Informe seu telefone com DDD</span> </p> <p> <label>Obrigatório - Mínimo 5 letras:</label> <input type="text" name="str" id="str" class="required" minlength="5" /> <span>Campo requerido, informe ao menos 5 letras</span> </p> <p> <label>Data:</label> <input type="text" name="data" id="data" class="required data" maxlength="10" /> <span>Campo requerido, informe uma data válida</span> </p> <p> <label>CPF:</label> <input type="text" name="cpf" id="cpf" class="required cpf" /> <span>Campo requerido, informe um CPF válido</span> </p> <p> <label>CNPJ:</label> <input type="text" name="cnpj" id="cnpj" class="required cnpj" /> <span>Campo requerido, informe um CNPJ válido</span> </p> <p> <label>Numérico Mínimo 5 caracteres:</label> <input type="text" name="num" id="num" class="required numeric" minlength="5" maxlength="10" /> <span>Campo requerido, apenas números</span> </p> <p> <label>Email:</label> <input type="text" name="email" id="email" class="required email" /> <span>Campo requerido, informe um e-mail válido</span> </p> <p> <label>Senha - Mínimmo 4 caracteres</label> <input type="password" name="password" id="password" class="required password" minlength="4" /> <span>Campo requerido, informe ao menos 4 caracteres</span> </p> <p> <label>Repetir Senha </label> <input type="password" name="rpassword" id="rpassword" class="required password" minlength="4" /> <span>Repita a senha</span> </p> <p> <button class="button blue submit">Enviar</button> <button class="button gray reset">Limpar</button> </p> </form> </div> </body> </html> <pre>
As instruções estão no arquivo leia-me.txt
O plugin pode ser customizado de
acordo com suas necessidades, as mensagens de validação podem ser alteradas no arquivo. Por favor reportem os possíveis erros para irmos atualizando. obs: antes que questionem, existe uma validação para placas de carros, era uma necessidade quando escrevi o plugin, não é nada que se use no dia-a-dia e deu preguiça de retirar rs rs
Daora, vou usar o plugin nesta semana! o/
Caro Rafael, boa noite! Sou estudante e pretendo estudar a linguagem Java para desenvolver um aplicativo para uso particular. Porém, os dados que irei utilizar neste programa são baixados da internet pelo MÉTODO POST. Como não pretendo estudar Html por enquanto, você estaria interessado em me ajudar a baixar esses dados da internet em xml para que eu possa utilizá-lo posteriormente no meu sistema? Veja os dados que pretendo baixar nesta página: http://www.cvm.gov.br/Port/DownloadArqs/download02.htm
Não achei seu e-mail, por isso faço a proposta por aqui. Muito obrigado.
Silmar, não entendi muito bem sua dificuldade!
Parece que você quer configurar esse sistema que está disponível para download, é isso?
Rafael, Parabens, esse codigo é muito bom, mais agora eu tenho um pequeno probleminha, esse codigo funciona para select box? pq eu testei aqui e nao funcionou… voce sabe(caso nao esteja funcionando) o que pode ser acrescido para valida-lo?
Abç e parabens!!
Fala Potter, cara tem sim, basta adicionar o class=”required” no select, no entanto, o primeiro option deve conter o value=””, exemplo:
<p>
<label>Combo:</label>
<select name="combo" id="combo" class="required">
<option value="">Selecione um item na lista</option>
<option value="0">AA</option>
<option value="1">BB</option>
</select>
<span>Selecione um item</span>
</p>
O primeiro option tendo o value=”” será validado normalmente para o caso do campo obrigatório;
Vlw!!
Funcionou!
Olá Rafael, Obrigado pelo Post, é muito útil.
Gostaria de saber se usando esse mesmo componente consigo checar se o E-mail sendo digitado já está adastrado em meu banco de dados?
Obrigado pela atenção.
Denis, para isso é preciso criar uma rotina em ajax/jquery para fazer a verificação no banco, infelizmente o plugin só valida os valores digitados e não faz consultas no banco. Abs
Parabéns. Muito bom o plugin!
Testei no IE7 e não funcionou, tem alguma coisa que eu possa fazer?
Att
Orlando, cara não tenho IE7, vou tentar instalar, eu havia testado no IE8/9 mas não no 7. Maldito IE hahahaha vou ver o que consigo e atualizo o script; abraços e obrigado por reportar
Alterei o código e testei através de um emulador do próprio IE9, não tenho certeza de estar funcionando, teste novamente em http://clareslab.com.br/learn/valida/
e se estiver funcionando faça novamente o download os fontes, depois abra o arquivo leia-me, um trecho relacionado ao botão submit mudou e está explicado no leia-me.
Campo telefone tem como?
Marcio, tem sim, atualizei o arquivo, faça novamente o download, no index.html já está incluso o exemplo fone;
abs
Rafael muitíssimo obrigado, eu tinha acabado de descobrir, seu script é muito fácil, e muito bom. Para falar a verdade é o mais elegante, simples que eu já usei. Parabéns …
Como sugestão, para ficar bem completo, incluir validação de CNPJ, PIS.
Valeu Marcio, adicionei a validação CNPJ como sugeriu. Depois, com mais calma irei incluir outras validações. Abs
http://clareslab.com.br/learn/valida/
Rafael, muito obrigado. Virei seu fã. Valeu mesmo. Parabéns pelo site.
tem como fazer a validação em tempo real?
Fernando, em tempo não dá!
Muito bom esse post, show de bola vai ser muito util para todos nós.
uma perguntinha, essa validação pode ser feita enquanto o usuario digita?
Valeu até mais
Sara, não dá com esse script, talvez eu faça outra versão trocando para validar no evento ‘onchange’!
Rafael bom dia. Parabéns pelo script muito bom mesmo.
Mas estou iniciando agora com Javascript e gostaria de saber se tem como e até mesmo se você pode me ajudar. Teria como fazer validação de um Radio Button e um Checkbox e aparecer a mensagem como os outros?
Obrigado
Edilson, infelizmente nessa versão creio não ter mas vou providenciar e te aviso ok;
Parabéns pela iniciativa!
Acho você não precisa colocar o evento no onkeypress, se você chamar o evento de validação no evento onblur já deve melhorar muito seu script.
Clicar a todo momento no botão de validar é muito chato, nenhum usuário faz isso.
Ex:
$(document).ready(function () {
$(“#f1 input[type=text], #f1 input[type=password], #f1 select”).blur(function () {
$(“#f1”).submit();
});
});
Legal essa parte que acrescentou, ficou mais dinâmico.
Estava a passear na net à deste tipo de plugins e deparei-me com o teu.
Muito bom mesmo.
Já agora tens aqui um blog com informação bastante util.
Vou fazer follow. Matem o bom trabalho, e se quiseres podes vir ver o meu blog tambem 🙂
Não roda no IE – fica todo desconfigurado
JEan, qual versão do IE? Para eu simular o problema e corrigir!
Rafael Muito Bom seu Plugin Porém no IE8 não está rodando tem algo que eu posso fazer ?
Cara, to sem IE8, tem como você dizer a mensagem que aparece na barra de status (triangulo amarelo do IE) ? Talvez assim eu possa reparar; vlw
algum movidade sobre funcionar no IE7 ?
aqui não funcionou
Fernanda, enquanto ninguém tiver a disposição de ver a mensagem de erro (que geralmente aparece na barra inferior do browser junto com um triângulo amarelo que indica erro JS) e me informar vai ficar sem novidade. Eu não tenho IE7 e não vou instalar ele na minha máquina; Vamos ver quando aparece um fi-di-Deus para informar o erro;
Gostei muito do Plugin 🙂 e Rafael Clares.. procure um programa chamado IEteste eu usei e é muito bom ele emula os diferentes versões do IE é ótimo pra testar a compatibilidade…
Jonatan, alterei o código e testei através de um emulador do próprio IE9, não tenho certeza de estar funcionando, teste novamente em http://clareslab.com.br/learn/valida/
e se estiver funcionando faça novamente o download os fontes, depois abra o arquivo leia-me, um trecho relacionado ao botão submit mudou e está explicado no leia-me.
Pessoal, alterei o código e testei através de um emulador do próprio IE9, não tenho certeza de estar funcionando, teste novamente em http://clareslab.com.br/learn/valida/
e se estiver funcionando faça novamente o download os fontes, depois abra o arquivo leia-me, um trecho relacionado ao botão submit mudou e está explicado no leia-me.
Tem que fazer alguma alteração para funcionar no Chrome?
Você testou?
Se testou e não funcionou informe o erro (Ctrl+ Shift + J mostra o console com mensagens)
De toda forma, no meu chrome está ok;
Sim testei, o que acontece é que não valida nada, baixei o arquivo e descompactei e sem modificar nada o index quando é rodado no Mozila funciona e Chrome não.
Caique e você baixou essa versão nova que coloquei? Digo, depois que você postou sua dúvida eu fiz umas alterações no script;
Coloca o seu HTML no pastebin.com e me manda o link para eu ver! Abs
Cara, preciso de uma informação, ja que vc manja disso..
$(document) .ready(function(){
$(“#form1”) .validate({
rules:{
nome:{required:true, minlength: 10},
senha:{required:true}
},
messages:{
nome:{required: “O campo nome deve ser preenchido!”, minlength: “Mínimo de 10 caracteres!!”} },
senha:{required: “O campo senha deve ser preenchido!”
},
});
});
tenho este codigo jquery, quando vou validar meu form essas MESSAGES aparecem embaixo de minha textfield, é possivel eu colocar elas em uma determinada posição do formulário??
Desde já agradeço!!
Vlw
Cara, você precisa ver isso na página do cara que fez o plugin.
Excelente post, muito bom mesmo, estou implementando em meu site e pintou a seguinte situação:
Coloquei um checkbox para o cliente checar se é pessoa jurídica ou física, através deste checkbox oculto a razão social e cnpj, sendo que estes são validados mesmo estando ocultos, consegue me dar um help nesta questão?
Abraços e mais uma vez parabéns, já está em meus favoritos.
Olá Anderson, obrigado pelo comentário.
Faz o seguinte, copie o trecho do seu código que tem o form no pastebin.com. Em seguida me passe o link gerado no pastebin.
Aqui não tem como colocar códigos nos comentários, além disso, no pastebin.com é bom para isso.
Daí já te digo o que está havendo. Abs
Agradeço o breve retorno, segue abaixo a url no pastebin.com
http://pastebin.com/UxPs1Gw5
Abraços
Me explica essas duas funções sua, mostra e mostra2, em que momento você usa cada uma delas?
Uso estas funções no checkbox de pessoa física e jurídica.quando é um cadastro de pessoa física possui os campos responsável, rg, cpf e data de nascimento, quando checa pessoa jurídica libera mais 2 campos, razão social e cnpj.
Esses 2 campos que são ocultos no formulário.
Mas quando é juridico mesmo assim exibe os outros campos ? como nome e cpf por exemplo ?
Tenta assim:
http://pastebin.com/4C8ybSSA
Mesmo assim continuou sem funcionar, acesse por favor esta url:
http://www.novainfo.com.br/teste/
Mas eu não entendi o erro, eu preenchi os campos e consegui submeter os dados.
O que deveria ocorrer e não ocorre?
como pessoa fisica tenta preencher o form e submeter, pede validação dos campos ocultos.
Já vi o problema, depois que clica em PJ e volta para PF dá certo. Reparei segue o link:
http://pastebin.com/4C8ybSSA
Irmão, agradeço mais uma vez pelo suporte, vc tem alguma forma de contato online?
Contato online é o blog meu brother, se for para negócios eu passo o email, mas dúvidas só pelo blog, assim ajudo mais de uma pessoa com o mesmo problema.
Tenho uma empresa de informática e sempre temos serviços de desenvolvimentos de sistemas, qual o seu e-mail?
vou te mandar um email com os contatos, ok?
abs
Obrigada Rafael,
Seu código é perfeito!
Só estou quebrando a cabeça como fazer o validate sem submeter o form, tem como?
Em alguns casos eu preciso fazer a validação antes, porém só validar+submeter quando o usuário clicar o botão
Pode me ajudar?
Obrigada
Tenta esse:
http://pastebin.com/rAQ88iV4
É o validate.js alterado,
Quando clicar em enviar vai apenas validar, você pode submeter criando um button com class=”sendsubmit”
Obrigada! Mas não funcionou, devo estar fazendo alguma coisa errada.
Criei um outro botão só pra verificar (posso depois torna-lo invisivel e chamar via código) mas mesmo colocando com classe sendsubmit não funciona, já testei colocar type=”button” ao invés de type=”submit”, tentei com button e com input type=”button” e nada 🙁 Toda vez que clico nele, ele faz o validate e submete o form 🙁
mas você atualizou o código do script conforme coloquei no pastebin?
o exemplo está online, dá para ver?
Substitui o jquery.validate.js com o código do pastebin, só troquei os acentos das mensagens pelos respectivos códigos de caracteres especiais do html. Não consegui visualizar o exemplo, é no próprio pastebin?
rs srs eu alterei o código de validação.
1 – Abra esse link: http://pastebin.com/rAQ88iV4
2 – Copia o código inteiro
3 – Abra seu arquivo original (validate.js)
4 – Cole o código do pastebin no validate.js
É para substituir o arquivo validade.js pelo código inteiro do pastebin.
Se achar mais fácil, remova o validate.js e crie um novo com esse código do pastebin http://pastebin.com/rAQ88iV4
É isso, eu testei e funciona exatamente como você deseja;
Buááá sou burra mesmo, eu substitui o código todo, só que usei o nome jquery. na frente do validate.js, fiz isso seguindo seu exemplo, dá diferença ter jquery. na frente?
Baixei tudo de novo, e olhei, está igual ao meu, só troquei o jquery.validate.js pelo código q vc botou no pastebin. O demo também continua do jeito que estava antes, não tem exemplo do sendsubmit
Deixa pra lá, acho que não vou conseguir 🙁
Obrigada e desculpa o trabalho
Rafael!!! Funcionou!!!!!!!!! Poxa, foi só desligar tudo e tentar no dia seguinte. Não falei que devia ser alguma burrice minha!
Obrigada!!!!!
kkkkkkkkkkk ah meu, quando altera qualquer coisa no javascript é bom excluir o cache!
Boa sorte!
Gostei muito deste codigo, quero usar em uma aplicação minha, a validação funcionou aqui, mas estou com uma dúvida, onde posso adicionar o cod ‘ajax’ para enviar estes dados ?
Tenta assim:
http://pastebin.com/uXDjNeJs
bom ele envia mas não obedece o cod de validação. Ou seja o cod de validação diz que faltou algum campo e em seguida ele envia mesmo com o campo vazio.
Olá Rafael! Parabéns pelo excelente trabalho e pela didática excepcional!
Observei que a validação do campo Telefone dá erro: aparece mensagem de campo requerido mas a validação ocorre mesmo com o campo vazio (aparece o PNG azul e o form é submetido).
Testei também usando apenas alguns campos incluindo o de telefone e o mesmo erro ocorre.
Retirando a máscara do campo telefone, funciona.
O que poderia ser?
Geovane, creio que seja a mascara, pois a máscara faz com que o campo não esteja vazio. Coloca lá no pastebin pra gente ver. abs
Rafa, no meu sistema eu uso a biblioteca “jquery-1.9.1.js”, quando adiciono o valida não funciona, da conflito. como posso ajustar??
Rafa, use o google chrome e pressione f12 na tela do script, dê um refresh e teste o script, os erros aparecerão na console. Daí você me diz os erros.
Rafael parabéns pelo post, estou tentando implementar a validação em campos com botão “radio”, você poderia me ajudar pois até o momento não consegui?
Poxa Marcelo, realmente falta essa validação, irei fazer uma nova versão do script e te aviso!
Bom dia Rafael, beleza de código, gostaria de saber se você pretende adicionar um validador para campos monetários e, mais ainda, com campos usando casas decimais, sendo estas pré-definidas, ou seja, posso validar com 2 casas, 3 casas, etc… Desde já muito obrigado.
Desculpe a demora em responder, estive ausente por algum tempo.
Boa ideia George, acho que esse script merece uma atualização. Assine o blog (ou acompanhe o post) para receber a notificação de atualização.
Rafael! E se tiver dois campos de CPF como fazer? Ex CPF Aluno e CPF Responsavel?
Sim Bruno, basta que os IDS dos elementos sejam diferentes;
Olá Rafael! Eu sou iniciante em Java e nunca usei um jquery. Eu estou tentando utilizar o seu modelo mas não estou conseguindo. A parte do css funcionou mais a parte da validação não deu certo.
Eu não sei se coloquei os arquivos .js do jeito certo no meu código.
Eu estou usando o eclipse e na pasta WebContent criei uma pasta chamada JQUERY e coloquei os 3 arquivos .js porem um fala que tem um erro que é o jquery.min.js
Depois disso coloquei o resto do código.
CPF:
Campo requerido, informe um CPF válido
Esse é só um exemplo do que eu fiz. Estou fazendo em uma página JSP isso interfere?
Desde já agradecido!
Edson, use o chrome e utilize o console de erros (CTRL + SHIFT + J).
Talvez algum caminho esteja incorreto. Não tenho ideia da estrutura de suas pastas e nem o momento em que o erro ocorre e isso dificulta um pouco em te ajudar.
Tente testar o script padrão, se funcionar, inclua no seu script ao poucos, coloque os js, certifique-se de que estão sendo chamados na página e depois coloque o form.
Se estiver online seu exemplo me avise para eu dar uma olhada no erro.
Outra opção é baixar novamente o jquery.js e veja se em seu projeto já não há a chamada à um jquery.js, pode haver diferença entre versões.
Abs
baixei o plugin, mas estou perdido no uso, no seu exemplo vc não colocou a ação, onde eu digo pra ele qual a ação, exe: $.post(‘http://dominio.com.br/agendamento/send’
Respondi sua dúvida há alguns dias atrás, espero que tenha recebido a notificação por e-mail pois a base de dados do blog precisou ser restaurada e não há a resposta que lhe enviei, continha um exemplo no pastebin.
http://pastebin.com/sH1R6z5C
Galera só agora consegui tempo para incluir a validação do radio e checkbox.
http://clareslab.com.br/learn/valida/
BACANA CÓDIGO, SÓ NÃO CONSEGUI FAZER A CRITICA DO CEP FUMEGAR NO IE
Boa tarde Rafael,como faço para implementar no script jquery.validate.js a verificação no banco de dados se já existe o e-mail cadastrado e somente concluir o cadastro se passar por esta validação.
Abraço.
Rafael, parabéns!!
Excelente formulário, gostaria de saber se é possível você editar o campo de telefone para aceitar telefones com 8 e 9 dígitos, já que em alguns estados os telefones possuem 1 dígito a mais.
Elizandro, tem que alterar a máscara de $(’99 9999-9999′) para $(’99 9999-999?9′)
Ok, muito obrigado!!
Rafa… vi que você colocou um ponto de interrogação no lugar do 9. Mas aqui não funcionou, eu precisaria fazer que ele aceitasse nove e oito dígitos no mesmo campo, como posso fazer?
Eu fiz o teste aqui e vi que em alguns navegadores no cel nao funciona corretamente, você tem algo que seja compativel para celulares ? obrigado, belo post.
Boa tarde,
Desculpe incomodar, mas gostaria de inserir uma validação adicional no seu script para validar a inscrição estadual, porém não entendo nada de javascript, você poderia me auxiliar.
Encontrei uma validação na internet que funciona bem, porém gostaria de implementá-la no seu script para aparecer as mensagens de forma padronizada, você poderia me ajudar, segue validação.
http://pastebin.com/jm3Z5Bm4
As máscaras acredito que ficaria assim:
http://pastebin.com/XD4jGRJt
Muito obrigado
A verificação do CEP no IE 8 não esta funcionando, tu sabe como corrigir isso ?
Cara, teu plugin é muito foda, só tive um problema na validação do campo CEP no ie 8 que não funciona, estou tentando alterar para que a validação seja feita mesmo quando os campos não tiverem a classe required. ex: Se o campo CEP não tiver a classe required ele envia normalmente sem preencher, mas se for preenchido deverá verificar se os dados são reais, mas gostei muito.
Valeu, parabéns!
Muito bom seu plugin Rafael, entretanto alguns ajustes devem ser feitos, em alguns navegadores por exemplo não funciona. Para que o usuário evite algumas dores de cabeça, aconselho a usa-lo com o maskedinput. Grande abraço, parabéns! Vale lembrar que eu estou utilizando o mesmo em meus projetos.
Sou muito leigo ainda em programação estou aprendendo tenho uma duvida que pode ser besta mais não sei como resolver, como faço para quando os campos do formulário forem preenchidos eu rebeber em um e-mail esse dados? pode me ajudar ?
Rafael, parabéns pelo plugin, excelente!!!, mas estou com um problema, talvez por falta de conhecimento, em meu form tenho dois radiobuttons controlado por um script que apresenta de acordo com a escolha uma lista ou campos de data inicio e data fim, acontece que ao dar um submit, pelo campo data pex estar em hide ele está validando da mesma forma, ou seja uma das opções sempre será validada, mas sempre haverá uma em hidden, como posso controlar isso? Obrigado.
Rafael, boa noite. Primeiro, parabéns pelo plugin! No download que fiz hoje não estavam inclusos os campos senha e confirmar senha. Vi que no tutorial acima você postou os inputs (password e rpassword), mas não está funcionando. Digitei senhas diferentes em cada campo e ele validou. E vi que no arquivo jquery,validate.js não tem o código para a segunda senha. Obrigada.
Boa tarde, esse código é muito bom para validação de campos de formulário. A minha dúvida é a seguinte não sei se você já fez o teste, é que esse código não funciona numa aplicação em django, em php funciona e java também.
o demo ta desatualizado