Curso Web Design | Validação de formulários com Jquery

Link to Blog do Curso Web Design - Microcamp SP

Posted: 24 Jul 2014 05:21 AM PDT

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!

Páginas

quinta-feira, 24 de julho de 2014