Validar Formulário com Jquery
Script atualizado, está mais simples, funcional e bonito (kkk) , abaixo o link:
http://clares.com.br/2012/06/02/validacao-de-formularios-com-jquery-plugin-atualizado/
Existem diversos plugins jQuery para validação de formulários mas os que testei exigem alguma programação, ou seja, é preciso aprender os métodos do plugin, etc …
Pensando em um script que não necessite de conhecimentos avançados em JQuery e nem programação, resolvi escrever mais esse script, que não é (ainda) tão completo como os plugins mas é útil.
Ainda preciso criar a validação de: radio, checkbox, select (estado inicial) e daí atualizo o post.
O script vai validar campos de um formulário com JQuery, os campos validados na versão atual do script são:
– campo obrigatório
– campo númerico
– campo email
– campo valor mínimo
– campo valor máximo
– campo password (confere os 2 campos senha1 e senha2)
Exemplo:
<html>
<head>
<title>Validate Script</title>
<script src="http://clareslab.com.br/learn/validate/jquery.min.js">
<script src="http://clareslab.com.br/learn/validate/validate.js">
<script type="text/javascript">
function teste(){
// valida o forumario f1
validate('f1');
//checa a validacao
if(validateState){
//seu codigo
alert('validado');
// para submeter o form
// document.f1.submit();
}
}
</script>
</head>
<body>
<form name="f1" id="f1" onSubmit="return false" >
<label>String Min 5:</label>
<input type="text" name="str" id="str" min="5" />
<label>Númerico min 5 - max 10:</label>
<input type="text" name="num" id="num" min="5" max="10" class="numeric" />
<label>Email:</label>
<input type="text" name="mail" id="mail" class="required email" />
<label>Password:</label>
<input type="password" name="password" id="password" class="required password" />
<label>(re)Password:</label>
<input type="password" name="rpassword" id="rpassword" class="required password" />
<button onclick="return teste()">Valida Form</button>
<p id="validate_message">&nbsp;</p>
</form>
</body>
</html>
Os parâmetros para a validação consistem apenas em adicionar as classes ou atributos min/max nos campos, ex:
Para um campo requerido/obrigatório <input type="text" name="test" id="test" class="required" /> Para um campo númerico / requerido <input type="text" name="test" id="test" class="required numeric" /> Para um campo com valor e-mail / requerido <input type="text" name="test" id="test" class="required email" /> Para um campo com valor mínimo / requerido <input type="text" name="test" id="test" min="5" class="required" /> Para um campo com valor máximo / requerido <input type="text" name="test" id="test" max="5" class="required" /> Para um campo com valor password / requerido <input type="password" name="pass1" id="pass1" class="required password" /> <input type="password" name="pass2" id="pass2" class="required password" /> As mensagens de retorno da validação são direcionadas ao elemento de id validate_message, então é por isso que existe o elemento: <p id="validate_message">&nbsp;</p> Sem um elemento com esse ID as mensagens são omitidas.
No caso do password, serão conferidos os valores dos 2 campos com classe password
Para validar o formulário, basta chamar a função validate(‘idDoFormulario’) em uma outra função, ex:
function add(){
validate('idDoForm');
if(validateState){
// seu codigo
// alert('validado')
// enviar formulario
// $('#idDoForm').submit();
}
}
Após ter chamado a função validate() seu estado (false / true) é armazenado na var validateState.
obs: o método validate() não tem retorno (false / true), seu estado só pode ser acessado através da var validateState, isso ocorre porque o método utiliza loop e passa por diversos estados.
Para alterar as mensagens da validacao basta abrir o arquivo validate.js e alterar as vars:
/* Required message */ validateRequiredMsg = "Campo de preechimento obrigatório"; /* E-mail message */ validateMailMsg = "E-mail informado é inválido"; /* Numeric message */ validateNumericMsg = "O valor deve ser númerico"; /* Min message */ validateMinMsg = "A quantidade mínima de caracteres é: "; /* Max message */ validateMaxMsg = "A quantidade máxima de caracteres é: "; /* Password message */ validatePasswordMsg = "Senhas não conferem";
Demo: Validate
Download: Validate
Abs,
Oi Rafael,
Tudo bem contigo? Primeiramente parabéns pelo ótimo site, sempre me ajudou e continua ajudando…
Gostaria de saber como faço utilizando esse seu exemplo submeter os dados do formulário para outra página e lá resgatar e utilizar no meu sistema de EMAIL já pronto em php, Tem como? Fiz uns testes aki, mas te confesso que estou totalmente perdido.
Abraços,
Paulo, o processo é comum, é que neste formulário não tem o action, é aí que se perdeu ?
Então, após a validação você pode submeter o formulário com o javascript, vejamos o exemplo
Eu comentei no post uma função assim:
function teste(){
// valida o forumario f1
validate(‘f1’);
//checa a validacao
if(validateState){
//seu codigo
alert(‘validado’);
}
}
Daí basta você alterar o alert para um submit, ou seja, sabendo que o formulário foi validado você o submete dessa forma:
function teste(){
validate(‘f1’);
if(validateState){
document.f1.submit(); // supondo que f1 é o nome/id do formulário
}
}
abs
Grande Rafael,
Obrigado pela atenção… E desculpa o incomodo.
Eu me perdi no seguinte, vi a questão do alert… E coloquei o submit. Eu já tenho uma função php que manda o email para o cliente juntamente com uma cópia. Eu queria passar as váriaveis desse form para a função lá… Ex.: send.php juntamente com as variáveis. Mas, não to sabendo como fazer… Tentei algumas coisas, por exemplo:
function add(){
validate(‘contato’);
if(validateState){
//Pega o valor do campo Nome
var nome = $(‘#nome’).val();
//Pega o valor do campo Email
var email = $(‘#email’).val();
//Pega o valor do campo Telefone
var tel = $(‘#tel’).val();
//Pega o valor do campo Assunto
var assunto = $(‘#assunto’).val();
$.post(‘util/send.php’, {Nome: nome, Email: email, Telefone: tel, Assunto: assunto});
}
}
Mas, não obtive sucesso… Ele até dispara o email, mas sem os dados… to perdidinho da Silva… rsrs
Abraços,
Ah, entendi! Mas como está no send.php ?
como fez para pegar as vars nele ?
Faz assim no send.php
extract($_POST);
print “teste var $Assunto”; exit;
para ver se ele extrai as vars e as printa;
dai na funcao post do Jquery faça assim:
$.post(‘util/send.php’.{Nome:nome, Email:email, Telefone>tel, Assunto: assunto}, function(data){
alert(data)
});
para ver se ele vai dar o alert com o valor do print do send.php
Ah, pelo que observei você está mandando as vars no post com a primeira letra maíscula, além de não ser uma boa prática você pode esquecer na hora de recupera-la. Por ex:
Se você fizer
print $_POST[‘assunto’]; // nao retorna nada pq a var que está mandando está em maiscula
print $_POST[‘Assunto’]; // esse retornará algo
entao no Jquery aconselho enviar {assunto: assunto, email: email …etc}
abs
Oi Rafa,
Fiz a modificação como sugeriu e o print esta retornando o que esta escrito no formulário.
Podes até observar se quiser: http://www.ditarso.com/pamella/contato_02.php
Hmmm.. Estou te incomodando não é? Me perdoa..
ahhhhhhhhhhhhhhhhhhhhhhhhhhh powwwwwwwwwwwwwwwwwwwwwwwwwww aeeeeeeeeeeeeeeeee naoooooooooooo vaiiiiiiiiiiiiiiiiiiii
olha só, seu form tá assim:
name=”assunto” id=”str”
o Jquery pega o valor pelo id e não pelo name ….
você tem que colocar o name e id igual !
name=”assunto” id=”assunto”
name=”email” id=”email”
tendeu ?
abs
Oi Rafa,
Eu entendi, mas aonde entra a validação do formulário que você esta colocando aki…? Lembra que Ela utiliza o id=”str” para dizer que o campo é string e que vai haver a ação da validação?
Não, não tem relação!
Eu utilizei id=”str” como exemplo, o que define o tipo do campo é o class=”required numeric” se nao colocar o numeric, automaticamente será string.
Coloque o form no padrão, id e name iguais para cada campo.
<input type=”text” name=”nome” id=”nome” class=”required” />
<input type=”text” name=”assunto” id=”assunto” class=”required” />
Etc…
Rafa,
Boa Noite.
Fiz a modificação e realmente, funcionou como uma luva… Agora assim, o php não esta mais reconhecendo essas váriavies no send.php eu tenho de extrair elas de alguma forma e coloca-las em variaveis?
Pode extrair normalmente como sempre fez, acredito que faça assim né:
$assunto = $_POST[‘assunto’];
Bem, se for assim está certo mas dá uma lida nesse post:
http://clares.wordpress.com/2010/09/29/dados-via-post-com-php/
abs
Rafa,
Brother, muito obrigado… Mano, funcionou perfeitamente agora… Retirei o print e tudo funcionou normalmente, Deus te abençoe amigo, obrigado pela sua disposição e pela sua atenção…
Muito obrigado mesmo abraços.
Deus te abençoe,
aê, que bom que deu certo, boa sorte brother!
até mais,
Sei que o post é antigo, mas…
tem como adaptar uma verificação de login no BD, pra verificar se o login já existe?
se tiver como aí fica filé.
eu até tenho aqui mas não consegui adaptar, segue o código:
$(‘#form-conta-criar’).validate({
rules:{
usu_login:{ required: true, remote: ‘/verifica_login.php’ }
},
messages:{
usu_login:{ required: ‘Este Campo é requerido’ , remote: ‘Login já está em uso.’}
}
});
nesse caso ele usa o plugin do jQuery (jquery.validate)
O ideal é :
– criar uma função PHP que faça uma verificação no banco e retorne 0 ou 1;
– criar uma função JQuery que envie o login para o PHP e verifique seu retorno, dê a mensagem de acordo com o mesmo;
Vou esboçar aqui as funções:
PHP:: getlogin.php
if(isset($_POST[‘login’]) && !empty($_POST[‘login’]))
{
$login = trim($_POST[‘login’]);
getLogin($login);
}
function getLogin($login)
{
$query = mysql_query(“SELECT username FROM users where username = ‘$login'”);
if($query && count($query) >= 1)
{
echo 0; //o login existe
}
else
{
echo 1; // login nao existe
}
}
JQuery::
$(‘#usernameInput’).live(‘change’,function(){
var login = $.trim($(‘#usernameInput’).val())
$.post(‘getlogin.php’,{login:login},function(data){
if(data == 0)
{
alert(‘usuario existe)
}
elseif(data == 1)
{
alert(‘usuario nao existe’)
}
else
{
alert(‘o sistema quebrou’ + data)
}
})
})
O ideal é :
– criar uma função PHP que faça uma verificação no banco e retorne 0 ou 1;
– criar uma função JQuery que envie o login para o PHP e verifique seu retorno, dê a mensagem de acordo com o mesmo;
Vou esboçar aqui as funções:
PHP:: getlogin.php
if(isset($_POST[‘login’]) && !empty($_POST[‘login’]))
{
$login = trim($_POST[‘login’]);
getLogin($login);
}
function getLogin($login)
{
$query = mysql_query(“SELECT username FROM users where username = ‘$login'”);
if($query && count($query) >= 1)
{
echo 0; //o login existe
}
else
{
echo 1; // login nao existe
}
}
JQuery::
$(‘#usernameInput’).live(‘change’,function(){
var login = $.trim($(‘#usernameInput’).val())
$.post(‘getlogin.php’,{login:login},function(data){
if(data == 0)
{
alert(‘usuario existe)
}
elseif(data == 1)
{
alert(‘usuario nao existe’)
}
else
{
alert(‘o sistema quebrou’ + data)
}
})
})
//considerando que usernameInput é o ID/Name do input que recebe o login;
É mais ou menos por aí, faça um teste de me fale, ok?
Abraços
Mt bom o post
Olá Rafael, uso seu script de validação já algum tempo, agora estou precisando validar também um select option e um radio button, como eu poderia fazer ou incluir isso no script? tem algum exemplo?
O select já valida no plugin atual.
http://blog.clares.com.br/validacao-de-formularios-com-jquery-plugin-atualizado/
O radio terei que arrumar tempo para incluir na validação e atualizar o plugin.
Olá Rafael!
Obrigada pelo artigo, é excelente! Aproveitando o primeiro post, gostaria de usar o formulário apenas como contato para o meu site (enviar diretamente para o email). Como posso fazê-lo? Sei que falou aquele código em alert, mas para ser enviado diretamente para o meu email, qual eu poderia utilizar? Não entendo de programação e essa ajuda seria muito importante para mim, se tiver um tempinho. Obrigada!
Olá Patrícia, desculpe a enorme demora para responder. Não tinha visto sua pergunta.
Para enviar o e-mail pode usar outro post, veja:
http://blog.clares.com.br/enviando-email-com-autenticacao-php/