<pedrocorreia.net ⁄>
corner
<mySearch ⁄> <mySearch ⁄>

corner
 
corner
<mySnippets order="rand" ⁄> <mySnippets order="rand" ⁄>

corner
 
corner
<myContacts ⁄> <myContacts ⁄>

<email ⁄>


pc@pedrocorreia.net

<windows live messenger ⁄>


pedrojacorreia@hotmail.com

<myCurriculum type="pdf" ⁄>


Download
corner
 
corner
<myBlog show="last" ⁄> <myBlog show="last" ⁄>

corner
 
corner
<myNews show="rand" ⁄> <myNews show="rand" ⁄>

corner
 
corner
<myNews type="cat" ⁄> <myNews type="cat" ⁄>

corner
 
corner
<myQuote order="random" ⁄> <myQuote order="random" ⁄>

corner
 
corner
<myPhoto order="random" ⁄> <myPhoto order="random" ⁄>

<pedrocorreia.net ⁄>
corner
 
corner
<myAdSense ⁄> <myAdSense ⁄>

corner
 
corner
<myVisitorsMap ⁄> <myVisitorsMap ⁄>

corner
 
 

<Verificar validade de campos usando Ajax ⁄ >




clicks: 13028 13028 2007-07-05 2007-07-05 goto mySnippets mySnippets php  Download  Bookmark This Bookmark This



A agilização no preenchimento de formulários é um processo importante num site, não é chato submetermos um formulário e só depois ser exibida a mensagem "Desculpa lá mas o username 'GloriosoSLB' já foi escolhido" e lá temos de preencher os campos novamente ...


Supondo que temos um formulário de registo no nosso site constituido por vários campos (para este snippet irei só demonstrar para dois) tais como: username e email, em principio serão dois campos que terão de ser univocos na nossa tabela, visto que não convém muito que várias pessoas possuam como login o mesmo username ou o mesmo e-mail :), seria interessante fazermos essa validação aquando do preenchimento dos mesmos e não só quando fazemos o post do formulário, para evitar possiveis sucessivos postbacks, até que as regras de integridade sejam satisfeitas, impedindo assim uma maior sobrecarga do nosso servidor poderemos recorrer ao Ajax, para que de um modo assincrono possamos exibir directamente ao cliente de que aquele campo que ele está a preencher não se encontra disponivel e/ ou é inválido.


Vamos usar uns identificadores (imagens) para sinalizar se o preenchimento do(s) campo(s) se encontra(a) ou não correctamente preenchido(s):
- caso esteja correctamente preenchido:
- caso contrário:


Olhando agora para o que realmente interessa, o código, decidi dividir em 4 ficheiros:

- funcoes.php -> tem as funções responsáveis pela construção do formulário e comunicação com a BD






- ajax.php -> vai comunicar com a BD e devolver a resposta

- ajax.js -> "core" do ajax, aquando da invocação de uma função sua, chama o ajax.php e faz o tratamento da resposta enviada por este;

- index.php -> o que menos interessa para aqui ;)

nota importante: neste snippet não foquei a validação dos dados aquando da submissão ou inserção dos dados (além de que neste snippet nem vão ver código de inserção na BD:)), visto que tal não era o objectivo, porém nunca é demais relembrar, que é extremamente importante que façam todas as validações javascript necessárias aquando da submissão do formulário (além de que poderão ser opcionais, sempre poupam um postback porque é código client-side) e mais importante ainda é fazer a validação a nivel do servidor, para que possamos minimizar o risco de erros na plataforma.

Dito isto, adiante ...


A tabela poderá ser algo deste tipo:
- dados_login(pk_login, username, email, ......)



-> funcoes.php
Neste ficheiro fazia uma especial chamada de atenção a esta linha:


< input type='text' name='txtUsername' id='txtUsername' size='30' onchange='jxCheckValueExists(this.name,'checkUsername');' / >



Este código "... onchange='jxCheckValueExists(this.name,'checkUsername');' ..." será o responsável pela chamada à função ajax, decompondo a função temos:

--> jxCheckValueExists(this.name,'checkUsername')

---> this.name - é o nome do campo onde irá ser lido o valor para verificar se existe ou não na base de dados;

---> 'checkUsername' - este parametro (é uma string como podem constatar facilmente) poderá ser visto como uma espécie de flag, isto é, nós podemos querer verificar vários valores, username, email, telemovel, etc, etc, e o que este parametro nos vai permitir é que depois possamos saber o quê e onde pesquisar, humm, confuso? Vejam o "ajax.php" que está lá explicito e compreenderão melhor :)




  1. <?php
  2. /**
  3. * Fazer ligação à bd
  4. *
  5. * @return identificador
  6. */
  7. function connectDB(){
  8. $db = mysql_connect("servername", "username", "password");
  9. mysql_select_db("database",$db) or die("<b><br>Impossivel aceder á base de dados.</b><br>");
  10. return $db;
  11. }
  12.  
  13. /**
  14. * Obter valor da tabela
  15. *
  16. * @param String $tabela
  17. * @param String $campoAObter
  18. * @param String $id_filter
  19. * @param String $filter_value
  20. * @return String
  21. */
  22. function getValueFromTable($tabela, $campoAObter,$id_filter, $filter_value){
  23. $db=connectDB();
  24. $filter_value=mysql_real_escape_string($filter_value);
  25. $sql="Select $campoAObter From $tabela Where $id_filter='$filter_value'";
  26. $myRes = mysql_query($sql) or die("$sql ".mysql_error());
  27. $myrow=mysql_fetch_assoc($myRes);
  28. $fieldValue=$myrow["$campoAObter"];
  29. mysql_close($db);
  30. return $fieldValue;
  31. }
  32.  
  33. /**
  34. * Construir Formulário
  35. *
  36. * @return String
  37. */
  38. function ConstruirFormulario(){
  39. return "
  40. <form name='frmTeste' id='frmTeste' method='post'>
  41. <label for='txtUsername'>Username</label>
  42. <input type='text' name='txtUsername' id='txtUsername' size='30' onchange='jxCheckValueExists(this.name,\"checkUsername\");' />
  43. <img name='txtUsernameImg' id='txtUsernameImg' src='blank.gif' border='0' />
  44.  
  45. <label for='txtEmail'>E-mail</label>
  46. <input type='text' name='txtEmail' id='txtEmail' size='30' onchange='jxCheckValueExists(this.name,\"checkEmail\");' />
  47. <img name='txtEmailImg' id='txtEmailImg' src='blank.gif' border='0' />
  48.  
  49. <br/><br/>
  50. <input type='submit' name='accao' id='accao' value='Submeter Formulário' />
  51. </form>
  52. ";
  53. }
  54. ?>




-> ajax.js
  1. var http_request = false;
  2.  
  3. /**
  4. * Criar request
  5. *
  6. */
  7. function createHttpRequest(){
  8. if (window.XMLHttpRequest){ // Mozilla, Safari,...
  9. http_request = new XMLHttpRequest();
  10.  
  11. if (http_request.overrideMimeType){
  12. http_request.overrideMimeType('text/html');
  13. }
  14. }
  15. else if (window.ActiveXObject){ // IE
  16. try{http_request = new ActiveXObject("Msxml2.XMLHTTP");}
  17. catch (e){
  18. try{http_request = new ActiveXObject("Microsoft.XMLHTTP");}
  19. catch (e) {}
  20. }
  21. }
  22.  
  23. if (!http_request){
  24. alert('Giving up :( Cannot create an XMLHTTP instance');
  25. return false;
  26. }
  27. }
  28.  
  29. /**
  30. * Função responsável pelo inicio da comunicação com o servidor
  31. * e a obtenção da resposta, bem como o seu tratamento
  32. *
  33. * @param field - Nome do Campo onde irá ser obtido o valor
  34. * @param type - Tipo de validação
  35. *
  36. */
  37. function jxCheckValueExists(field, type){
  38. var value = document.getElementById(field).value;
  39. url = antiCacheRand("ajax.php?accao=check_value&value="+value+"&type="+type);
  40. createHttpRequest();
  41.  
  42. http_request.onreadystatechange = function() {
  43. var img = document.getElementById(field+"Img");
  44. var state=http_request.readyState;
  45. var result, description;
  46.  
  47. if(state==4){//completo
  48. if (http_request.status == 200){ //pedido respondido com sucesso
  49. result=http_request.responseText;
  50. description=(result)?"Valor válido ...":"Este valor já existe, por favor escolha outro ...";
  51. img.src=(result)?"btOK.png":"btErro.png";
  52. img.alt=description;
  53. img.title=description;
  54. }
  55. }
  56. };
  57.  
  58. http_request.open("GET", url, true);
  59. http_request.send(null);
  60. }
  61.  
  62. // hack IE para ultrapassar problema cache pedidos get
  63. function antiCacheRand(aurl) {
  64. if ( aurl.indexOf("?") >= 0 ) { // já tem parametros
  65. return aurl + "&foo=" + encodeURI(Math.random());
  66. }
  67. else {
  68. return aurl + "?foo=" + encodeURI(Math.random());
  69. }
  70. }




-> ajax.php
  1. <?php
  2. // ficheiro responsável pela comunicação com a base de dados
  3. // e devolve a resposta ao pedido
  4.  
  5. include_once("funcoes.php");
  6.  
  7. $accao=$_GET["accao"];
  8. if($accao=="check_value"){
  9. $value=$_GET["value"];
  10. $type=$_GET["type"];
  11. switch ($type){
  12. case "checkUsername":
  13. $result=getValueFromTable("dados_login","pk_login","username",$value);
  14. break;
  15. case "checkEmail":
  16. $result=getValueFromTable("dados_login","pk_login","email",$value);
  17. break;
  18. default:
  19. $result="";
  20. }
  21.  
  22. echo ($result=="");
  23. }
  24. ?>




-> index.php
  1. <?php
  2. include_once("funcoes.php");
  3. $accao=$_REQUEST["accao"];
  4. ?>
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
  6. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt">
  7. <head>
  8. <title>Ajax - Verificar campo ...</title>
  9. <script type='text/javascript' src='ajax.js'></script>
  10.  
  11. <style type="text/css">
  12. body{
  13. font-family: Tahoma, Verdana;
  14. font-size: 12px;
  15. }
  16. </style>
  17.  
  18. </head>
  19. <body>
  20. <?php
  21. if(!$accao){
  22. echo ConstruirFormulario();
  23. }
  24. else{
  25. //fazer qualquer coisa com os dados .....
  26. // inserir, actualizar, remover, etc, etc
  27. }
  28.  
  29. ?>
  30. </body>
  31. </html>





Dois possiveis cenários poderão ser estes:

- falha no preenchimento do username


ou

- tudo correcto









clicks: 13028 13028 2007-07-05 2007-07-05 goto mySnippets mySnippets php  Download  Bookmark This Bookmark This