sexta-feira, janeiro 10, 2014

Validação de formulários com Ajax e PHP

Nesse tutorial veremos como criar um esquema de validação de formulários usando Ajax e PHP. A idéia é realizar as validações dinamicamente, à medida em que o usuário preenche os campos do formulário. Esse modo de validação é especialmente útil para auxiliar o preenchimento de longos formulários, pois com ele o usuário não precisa esperar pelo submit completo do form para saber o resultado da validação server-side. Fazendo o uso de chamadas assíncronas ao servidor (para isso usaremos Ajax), essas verificações serão feitas campo a campo, à medida em que o usuário preenche o formulário.

Para este tutorial, teremos um formulário simples de criação de usuário, em que o visitante do site terá que escolher um nome de usuário para criar o seu perfil. O nome de usuário deve ser único, e por isso nossa validação apenas apontará um erro caso seja escolhido um nome de usuário já cadastrado no sistema. Para fins deste tutorial, manteremos em memória uma lista de usuários pré-definida, mas no seu código, é provável que você implemente uma função de consulta dos usuários ao banco de dados ou a um arquivo.

Bem, vamos ao código!

Lado do Cliente

Primeiramente, vamos criar a nossa página index.html. Ela contém apenas um campo de texto onde será digitado o nome de usuário para cadastro e uma div que informará se o usuário cadastrado já existe ou não no sistema. À medida em que o usuário digita no campo de texto, é chamada a função Javascript checklogin, que recebe o valor do campo como parâmetro.

 <html>  
  <head>  
  <title>Validação de formulário com Ajax e PHP</title>  
  <script>  
      function checkLogin(user)  
      {  
      var xmlhttp;  
      if (window.XMLHttpRequest)  
       {//codigo para IE7+, Firefox, Chrome, Opera, Safari  
       xmlhttp=new XMLHttpRequest();  
       }  
      else  
       {//codigo para IE6, IE5  
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
       }  
      xmlhttp.onreadystatechange=function()  
       {  
       if (xmlhttp.readyState==4 && xmlhttp.status==200)  
           {  
                document.getElementById("result").innerHTML = xmlhttp.responseText == 0 ? "Login já existente!" : "Login ainda não cadastrado!";  
           }  
       }       
      xmlhttp.open("GET","checklogin.php?username=" + user,true);  
      xmlhttp.send();       
      }  
 </script>  
  </head>  
  <body>  
 <h1>Validação de formulário com Ajax e PHP</h1>  
 <form action="#">  
  Usuário: <input name="user" id="user" type="text" onkeyup="checkLogin(this.value)"/>  
 </form>  
 <div id="result" />  
 </body>  
 </html>  

A função checkLogin, definida acima, instancia o objeto xmlhttp de acordo com o tipo de navegador utilizado pelo usuário. Ação tomada quando a requisição assíncrona é respondida é basicamente mudar o texto da div com id "result" de acordo com o resultado da consulta.

Por fim, a função checkLogin abre uma conexão via GET com a página checklogin.php (será definida a seguir) passando como parâmetro o valor corrente do campo de texto. Vale lembrar que a função checkLogin será chamada - e consequentemente a página checklogin.php será consultada - a cada tecla digitada pelo usuário.

Lado do Servidor

Bem, para este exemplo o código server-side é bastante simples. Veja a seguir:

 <?php
 //este array geralmente será substituído por uma busca ao banco de dados ou arquivo texto
 $userList = array('alice', 'bob', 'carl', 'dexter', 'earl', 'frank', 'george', 'john');
 $user = $_GET['username'];
 if (in_array($user, $userList)) {
      echo 0; //usuario ja existe
 } else {
      echo 1; //usuario nao existe. logon ok.
 }
 ?>
A variável $userList contém a lista de usuários cadastrados no nosso sistema fictício. Na vida real, você provavelmente substituirá este trecho por uma consulta a uma base de dados, por exemplo. A partir daí, é muito simples. Caso o nome de usuário enviado como parâmetro via método GET já esteja cadastrado, a requisição retorna o valor 0. Caso contrário, retorna 1.

Voltando um pouco para a função checkLogin, no código da parte do cliente, você verá que o valor retornado pelo código servidor - neste caso, 0 ou 1- é atribuído a xmlhttp.responseText. É nesse ponto que a div será atualizada, mostrando se o usuário já existe ou não na nossa base de usuários.

Concluindo

Bem  pessoal, neste tutorial aprendemos a validar um formulário dinamicamente usando Javascript, PHP e chamadas assíncronas Ajax. Espero que este exemplo simples sirva como base para você fazer coisas mais legais. Sinta-se à vontade para postar dúvidas, críticas e sugestões nos comentários.

Até a próxima!

Ainda precisando de uma mãozinha? Que tal esses:







Nenhum comentário: