Validação de formulários com Jquery
Toda vez que vamos desenvolver um site ou mais especificamente uma página onde houver um formulário de cadastro, é imprescindível pensar nos erros que podem ocorrer no preenchimento incorreto dos campos pelo usuário e o transtorno que isso geraria em um Banco de Dados. Já apresentamos alguns tipos de validação aqui anteriormente, como no post onde demonstramos como fazer formulários em HTML5 e também como fazer validações pelo Dreamweaver. Desta vez, no post de hoje, demonstraremos como fazer a validação dos dados em um formulário utilizando o Jquery.
Nota do Moderador: O tutorial que você lerá a seguir foi desenvolvido e enviado pelo professor Victor Wurthmann, instrutor dos cursos de Web Design e Informática da unidade Praia Grande. Você pode conhecer melhor o Victor e entrar em contato com ele no seu perfil do Facebook ou deixando um recado para ele diretamente nos comentários do Blog. Boa leitura!
Objetivo da Validação
A validação de um campo de formulário consiste em testar os conteúdos preenchidos dentro dos campos antes de enviar para o banco de dados. Em geral, essa validação pode ser feita de duas maneiras distintas: via Server-Side ou via Client-Side.
Validação Server-Side
Scripts Server-Side (lado servidor, em português) serão processados diretamente no servidor retornando somente o resultado dos processos para o cliente. Pensando assim, esse método até parece legal, mas devemos levar em consideração que dessa maneira o fluxo de informações deverá passar obrigatoriamente pelo servidor e isso poderá sobrecarrega-lo.
Validação Client-Side
Scripts Client-Side (lado cliente) são processados diretamente na máquina do usuário. Com isso o servidor fica livre, pois como a validação é feita no próprio navegador, acaba sendo não exigido nesse método. Outra vantagem é que o processo não exige praticamente nada do processador da máquina.
Idealmente, é conveniente que seja utilizado um script Client-Side para suas validações. No exemplo que mostro a seguir, utilizaremos para tal fim o Jquery, que é uma biblioteca do Javascript (ao qual você já foi apresentado em um outro post, aqui mesmo no Blog do Web Design).
Criando o Formulário
Para compreender como tudo funciona, iremos criar um formulário simples com 3 campos, sendo um campo de texto (text) e dois campos de senha (password). Faça o código do formulário HTML a seguir em seu editor de códigos favorito, como o Notepad++ ou o Dreamweaver. Crie a estrutura básica (html, head, title…) e inclua o formulário a seguir:
<form action="#" method="post"> Nome:<input type="text" name="nome" id="nome" size="30" /> <br /> Senha:<input type="password" name="senha" id="senha" size="30" /> <br /> Confirma Senha:<input type="password" name="senha2" id="senha2" /> <br /> <input type="submit" value="Cadastrar" id="btn" /> </form> <p id="alerta"></p>
Salve-o com o nome index.html . O resultado no Browser será aproximadamente este:
Repare que cada elemento do formulário tem um seletor ID para identifica-lo, isso é importante na hora de criarmos o script. Insira após o formulário um paragrafo com ID alerta (<p id=”alerta”></p>) e não escreva nada nele.
Criando o Script de Validação
Agora vamos criar o script responsável pela validação, lembrando que você deve ter em mãos o arquivo da biblioteca Jquery. Para baixa-lo, vá até o site oficial do desenvolvedor: www.jquery.com.
Veja o código abaixo e logo a seguir a explicação dos comandos para que você possa entender o que está se passando em cada processo do código:
Criando as variáveis
O primeiro passo do Script é criar as variáveis que vão armazenar os valores dos campos dos formulários:
<script type="text/javascript" src="jquery.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("#btn").click(function(){ var nome = $("#nome").val() var senha= $("#senha").val() var senha2= $("#senha2").val()
Vamos entender os códigos:
Linha 1: Criando o link para a biblioteca Jquery que está na mesma pasta do arquivo index.html.
Linha 2: Iniciando o script que fará a validação do formulário.
Linha 3: Função que executa o script assim que a página HTML for carregada.
Linha 4: Função click, quando o usuário clicar no elemento com o ID btn (no caso o nosso botão “cadastrar”) ele irá executar a função a seguir.
Linha 5: Criando a variável nome e dizendo ao script que ela terá o valor do que for digitado no campo do formulário com ID nome.
Linha 6: Criando variável senha e dizendo ao script que ela terá o valor do que for digitado no campo do formulário com ID senha.
Linha 7: Criando a variável senha2 e dizendo ao script que ela terá o valor do que for digitado no campo do formulário com ID senha2.
Testando os Campos
Agora que já temos as variáveis armazenando o conteúdo do formulário, precisamos usar uma condição no script para testar os valores armazenados nas variáveis. Nesse caso utilizaremos a estrutura If /Else.
Veja a seguir:
if(nome == "") { $("#alerta").html("Coloque seu nome") return false; } else if(senha == "") { $("#alerta").html("Informe sua senha") return false; } else if(senha2 == "") { $("#alerta").html("Confirme sua senha") return false; }
Nessa parte do script estamos utilizando a estrutura If/Else para testar se os valores das variáveis são vazios, ou seja, se o usuário não digitou nada. Caso uma das condições seja verdadeira ele irá exibir uma mensagem no parágrafo que nós criamos com o ID alerta.
Entenda o código:
Linha 13 a 17: Primeiro teste com a variável nome. Caso ela esteja vazia, ele rodará a função HTML que exibirá uma mensagem através do elemento alerta. O return false serve para parar a execução do script naquele momento e aguardar por outras instruções.
Linha 18 a 22: Teste com a variável senha, caso ela esteja vazia irá executar a função HTML e exibir a mensagem no elemento com ID alerta.
Linha 23 a 27: Teste da variável senha2, caso ela esteja vazia irá executar a função HTML e exibir a mensagem no elemento com ID alerta.
Confirmando as senhas
Agora chegamos ao último passo, que é o de verificar se o usuário de fato digitou a senha corretamente. Geralmente quando criamos um cadastro temos de confirmar a senha, pois vários acidentes podem acontecer durante este processo: esbarrar em uma tecla e acabar digitando um caractere errado, digitar algo em maiúsculo em vez de minúsculo, por exemplo. Então o ideal é que tenhamos uma validação para esse tipo de situação também.
O código a seguir continua na mesma estrutura If /Else.
else if (senha != senha2) { $("#alerta").html("Digite a mesma senha") return false; } else { $("#alerta").html("Cadastro efetuado com sucesso") return false; } }) }) </script>
Entenda o código:
Linha 28 a 32: Verificando se a variável senha é diferente da variável senha2, caso essa situação seja verdadeira, ele exibirá uma mensagem através do elemento com ID alerta informando que o usuário deve digitar a mesma senha nos dois campos.
Linha 33 a 37: Finalizando a estrutura If/Else, dizendo ao script que se nenhum dos outros testes feitos forem verdadeiros, isso significa que o usuário digitou as informações corretamente, e então será exibida a mensagem “Cadastro Efetuado com Sucesso” no elemento com ID alerta.
Linha 38 a 40: Fechamento das chaves e parênteses e finalização do script.
Agora é só testar o trabalho e ver se funcionou corretamente! Veja a imagem com o resultado abaixo, onde digitei senhas diferentes e cliquei em “Cadastrar” para ver a mensagem de erro “Digite a mesma senha”:
Aqui o resultado caso digite as senhas corretamente:
Segue o código completo, caso tenha alguma dúvida ou queira copiar e colar diretamente no seu editor de códigos:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Validação de formulário</title> <script type="text/javascript" src="jquery.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("#btn").click(function(){ var nome = $("#nome").val() var senha= $("#senha").val() var senha2= $("#senha2").val() if(nome == "") { $("#alerta").html("Coloque seu nome") return false; } else if(senha == "") { $("#alerta").html("Informe sua senha") return false; } else if(senha2 == "") { $("#alerta").html("Confirme sua senha") return false; } else if (senha != senha2) { $("#alerta").html("Digite a mesma senha") return false; } else { $("#alerta").html("Cadastro efetuado com sucesso") return false; } }) }) </script> </head> <body> <form action="#" method="post"> Nome:<input type="text" name="nome" id="nome" size="30" /> <br /> Senha:<input type="password" name="senha" id="senha" size="30"/> <br /> Confirma Senha:<input type="password" name="senha2" id="senha2" /> <br /> <input type="submit" value="Cadastrar" id="btn" /> </form> <p id="alerta"></p> </body> </html>
Conclusão
A validação de um formulário é importante para a consistência dos dados de um banco de dados. Também é importante que seja feita na máquina do cliente para que não haja sobrecarga do servidor. Outra observação importante é que o Jquery pode ser utilizado também com códigos PHP, ASP entre outros.
Agora é com vocês. Criem seus formulários com mais campos, façam a validação e pratiquem. É importante para que no futuro possam desenvolver suas próprias validações. Espero ver seus comentários no Blog para saber se gostaram e que outros tipos de trabalhos gostariam de ver aqui. Muito obrigado e até a próxima postagem!