<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
 
 

<Validação de Formulários do lado do cliente ⁄ >




clicks: 15306 15306 2006-10-07 2006-10-07 goto mySnippets mySnippets javascript  Download  Bookmark This Bookmark This



A validação (de alguns ou de todos os campos) do formulário é um aspecto extremamente importante, senão arriscamos-nos a não ter informação importante para o correcto funcionamento do nosso site, como por exemplo não faz sentido um site que venda produtos usando o paypal e o utilizador não introduza a conta paypal associada; ou efectuarmos uma venda e não termos a morada do cliente. Por estas e outras variadissimas razões torna-se quase que obrigatório validar a inserção de dados por parte do utilizador. Neste exemplo vou focar a validação de dados do lado do cliente, para tal é usado Javascript, ao efectuarmos a validação do lado cliente "poupamos" o nosso querido e estimado servidor, isto porque se a validação não for efectuada com sucesso a página não é feito o pedido ao servidor.

nota extremamente importante: deverá existir sempre a validação dos dados no lado do servidor, isto porque a validação do dados no lado do cliente é facilmente ultrapassável

Vamos então construir o nosso html.

Nada de especial aqui, porém verifiquem no head as duas tags do javascript, carrega 2 ficheiros geral.js e o form.js (explicado detalhadamente mais à frente); outra coisa a ter em atenção é na construção do formulário, onsubmit='return validarFormulario (this)' este atributo irá fazer com que quando o formulário for submetido irá ser chamada a função validarFormulario (explicada mais adiante), se a função retornar uma valor verdadeiro a página é enviada para o servidor, c.c., não.
Este ficheiro contém apenas exemplos simples de validação, apenas verifica se os campos de texto possuem alguma informação ou se os campos dropdown não têm o indice 0 selecionado, partindo do principio que o indice 0 será sempre uma informação não selecionável; para o propósito deste exemplo serve bem, porém para outro tipo de validação torna-se escasso, como por exemplo validar password (se a confirmação é igual à password por exemplo); datas de nascimento; número de telemóvel, etc, etc.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt">
  3. <head>
  4. <script type='text/javascript' src='geral.js'></script>
  5. <script type='text/javascript' src='form.js'></script>
  6. </head>
  7. <body>
  8. <form name="formulario" method="post" onsubmit='return validarFormulario (this)'>
  9. Nome <input type="text" name="nome" size="40" />
  10. Clube
  11. <select name="clube">
  12. <option value="0">(escolha um item)</option>
  13. <option value="slb">Benfica</option>
  14. <option value="scp">Sporting</option>
  15. <option value="fcp">F.C. Porto</option>
  16. <option value="outro">Outro</option>
  17. </select>
  18. <input type="submit" name="submit" value="Submeter" />
  19. </form>
  20. </body>



Como repararam existem 2 ficheiros javascript, este exemplo poderia ser feito perfeitamente num só ficheiro javascript, ou até mesmo poderia ter sido feito no próprio ficheiro html, utilizando as tags script, porém além de ser código pouco elegante e re-aproveitável seria mais dificil a sua manutenção, mas tal não invalida que não seja feito tudo dentro do ficheiro html.

Prosseguindo, o ficheiro em baixo será o responsável pela verificação se os campos estão ou não correctamente preenchidos. Apesar de ser chamada dentro do head, sozinho não faz nada, é necessário que alguém chame as suas funções de verificação.
  1. /**
  2. * Verificar campos de texto
  3. *
  4. * @param formulário
  5. * @param campo de texto a verificar
  6. * @return bool - se tiver bem preenchido retorna true, c.c, retorna false
  7. */
  8. function checkField(form,field){
  9. return (!trim(form.elements[field].value)=="");
  10. }
  11.  
  12. /**
  13. * Verificar dropdown
  14. *
  15. * @param formulário
  16. * @param dropdown a verificar
  17. * @return bool - se tiver bem preenchido retorna true, c.c, retorna false
  18. */
  19. function checkFieldSelect(form, field){
  20. return (!form.elements[field].selectedIndex==0);
  21. }
  22.  
  23. /**
  24. * Mostrar aviso que existem campos não preenchidos
  25. *
  26. * @param nome dos campos em falta
  27. **/
  28. function msgErroCamposEmFalta(str){
  29. alert("É impossivel continuar, o(s) seguintes(s) campo(s) não está(ão) correctamente preenchido(s):\n\n\n"+str);
  30. }
  31.  
  32. /**
  33. * "Limpar" os espaços, à esquerda e à direita, da String
  34. * @param String
  35. * @return String
  36. */
  37. function trim(s){
  38. while ((s.substring(0,1) == ' ') || (s.substring(0,1) == '\n') || (s.substring(0,1) == '\r'))
  39. s = s.substring(1,s.length);
  40. while ((s.substring(s.length-1,s.length) == ' ') || (s.substring(s.length-1,s.length) == '\n') || (s.substring(s.length-1,s.length) == '\r'))
  41. s = s.substring(0,s.length-1);
  42. return s;
  43. }
  44.  



Aqui encontra-se o ficheiro que contém a função chamada 'validarFormulario (this)' aquando do click no botão de submeter. Basicamente o que esta função vai fazer é verificar se um conjunto de campos se encontra preenchido, para tal usa as funções checkField e checkFieldSelect do geral.js, a verificação é extremamente fácil como poderão facilmente verificar no exemplo dado.
  1. /**
  2. * Verificar se os campos do formulário estão bem preenchidos
  3. *
  4. * @param formulário
  5. * @return bool
  6. */
  7. function validarFormulario(form){
  8. var strErro;
  9. var res;
  10. res=true;
  11. strErro="";
  12.  
  13. if(!checkField(form,"nome")) strErro+="\n\n- Nome"; //verificar o campo de texto
  14. if(!checkFieldSelect(form,"clube")) strErro+="\n\n- Clube"; //verificar a dropdown
  15.  
  16. if (strErro) { //se existir o strErro, então é porque existe(m) campo(s) por preencher
  17. msgErroCamposEmFalta(strErro); //mostrar imagem ao utilizador
  18. res=false;
  19. }
  20.  
  21. return res;
  22. }



Não é demais relembrar que a validação de dados do lado do cliente nem sempre é fiável, no futuro irei também criar um snippet para a validação do lado do servidor que terá em conta o sql injection.

Qualquer erro/ dúvida é só apitar!









clicks: 15306 15306 2006-10-07 2006-10-07 goto mySnippets mySnippets javascript  Download  Bookmark This Bookmark This