anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

Validação de formulários com Jquery

capa post validação 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

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

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:

formulario

 

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”:

formulario teste validação

 

Aqui o resultado caso digite as senhas corretamente:

formulario teste sucesso

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!

Próximo

Postado por

Web designer, Ilustrador e produtor visual gráfico, santista de nascimento e de coração, amo o que faço e estou muito feliz em fazer parte da equipe Microcamp.

Postagem Relacionada

jkit
jQuery jKit: A revolução no Front-End
jQuery jKit Hoje eu venho falar de um plug-in incrível do Jquery: o super útil JKit!!