Verificando a consistência de um formulário com JavaScript

Oki

Como construir uma rotina para consistir um formulário em JavaScript. Neste artigo explicaremos como consistir campos dos tipos texto, numérico e e-mail.

[ Hits: 52.620 ]

Por: Celso Goya em 15/04/2003

0 0

Denuncie Favoritos Indicar Impressora

Introdução

A consistência de formulários JavaScript é ideal para utilização em sistemas onde não seja necessários padrões elevados de segurança, por exemplo, sistemas administrativos de sites.

Para realizar esta consistência vamos utilizar 3 scripts que encontram-se na área de script. São eles:

Passo 1

Adicione as seguintes linhas ao seu html.

Com estas linhas adicionadas será possível utilizar as funções contidas nestes arquivos .js

Passo 2

Atribua um nome para o seu formulário, neste caso chamamos de formTeste.

<FORM NAME="formTeste">

Lembre-se que é importante prestar atenção nas letras maiúsculas e minúsculas.

Passo 3

Adicione um evento OnSubmit ao seu formulário, ou seja quando o botão submit for pressionado chamaremos uma determinada rotina. Neste caso chamaremos a rotina checkForm.

<FORM NAME="formTeste" OnSubmit="return checkForm()">

Passo 4

Agora vamos criar uma rotina de validação.

Passo 5

Vamos adicionar a validação do seguinte campo:

<INPUT TYPE="TEXT" NAME="nome" SIZE=20 MAXLENGTH=50>

Neste caso verificaremos se o campo está vazio, caso esteja vazio então deverá exibir um alerta.

Passo 6

Agora vamos validar um campo numérico:

<INPUT TYPE="TEXT" NAME="numero" SIZE=20 MAXLENGTH=50>

Neste caso verificaremos se o campo digitado corresponde a um número, ou seja, se não foi digitado nenhum tipo de caractere alfa numérico.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" SRC="isEmpty.js"></script>
<SCRIPT LANGUAGE="JavaScript" SRC="isNumber.js"></script>
<SCRIPT LANGUAGE="JavaScript" SRC="isEmail.js"></script>
<SCRIPT LANGUAGE="JavaScript">
function checkForm(){

   if(isEmpty(document.formTeste.nome.value)){
      alert("Por favor preencha seu nome");
      document.formTeste.nome.focus();
      return false;
   }

   if(isNumber(document.formTeste.numero.value)){
      alert("Por favor preencha preencha o campo número com um número válido");
      document.formTeste.numero.focus();
      return false;
   }

   return true;
}
</script>
</head>

Passo 7

Agora vamos validar um e-mail:

<INPUT TYPE="TEXT" NAME="email" SIZE=20 MAXLENGTH=50>

O campo e-mail deve estar preenchido com um endereço de e-mail válido.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" SRC="isEmpty.js"></script>
<SCRIPT LANGUAGE="JavaScript" SRC="isNumber.js"></script>
<SCRIPT LANGUAGE="JavaScript" SRC="isEmail.js"></script>
<SCRIPT LANGUAGE="JavaScript">
function checkForm(){
<BLOCKQUOTE>
   if(isEmpty(document.formTeste.nome.value)){
      alert("Por favor preencha seu nome");
      document.formTeste.nome.focus();
      return false;
   }

   if(isNumber(document.formTeste.numero.value)){
      alert("Por favor preencha preencha o campo número com um número válido");
      document.formTeste.numero.focus();
      return false;
   }

   if(isNumber(document.formTeste.email.value)){
      alert("Por favor informe um endereço de e-mail válido");
      document.formTeste.email.focus();
      return false;
   }

   return true;
</BLOCKQUOTE>
}
</script>
</head>

O erro mais comum na implementação destas rotinas é o mal uso de maiúsculas e minúsculas nos nomes de formulário, campo e rotina JavaScript. Sempre que ocorrer um erro verifique se o Case está correto.

Outro erro comum é quando utilizamos um <INPUT TYPE="IMAGE"> para submeter um formulário, pois neste caso em especial ele não aciona o evento OnSubmit.

Uma boa dica é utilizar o JavaScript debugger para Netscape ou então o MS Debugger para Internet Explorer.

Todas as rotinas utilizadas aqui são produzidas com JavaScript 1.0, sendo assim não existe o problema de incompatibilidade entre browsers.

Caso tenham dúvidas, por favor e-mail-me-at celso.goya@moinho.net

[]'s
Celso Goya

Páginas do artigo

1. Introdução

Outros artigos deste autor

Netpanzer :: batalha de tanques multiplayer

Morphix Gamer: 600MB de diversão!

T.E.G. :: WAR do tabuleiro para o Linux

libpam-mount: a Solução para montagem de volumes SMB

Battle for Wesnoth

Leitura recomendada

Select dinâmico com PHP, Javascript e MySQL

Formulários HTML: Problemas com campos desabilitados?

Verificando a consistência de CPF e CNPJ em um formulário com JavaScript

Dicas simples para dar mais usabilidades aos formulários

Camada de Transporte TCP/IP e Aplicação

Comentários

[1] Comentário enviado por XiS em 28/04/2004 - 13:29h

Muito bom o artigo... simples e rápido.. porem quem não tem "intimidade" como o javascript pode apanhar devido a 2 pequenos erros que tem. O primeiro são as tags de BLOCKQUOTE que não deveriam estar ali... a outra é que na consistencia do email esta "isNumber" .. e deveria ser "isEmail" ... ok? so um toque no pessoal ae... ;) Nota 9.5 pro artigo.. que se corrigido.. leva 10!

0 0

[2] Comentário enviado por XiS em 28/04/2004 - 13:48h

Galerinha.. no caso do "isNumber" eu acho melhor vc forçar a pessoa digitar so numero... um javascript que permite que so numeros sejam digitados... acho que vo escrever uma artigo sobre isso.. vamo ver

0 0

[3] Comentário enviado por LoboRaivoso em 28/07/2004 - 16:40h

Os arquivos e o tutorial são bem legais, mas acho que as funções poderiam ser encapsuladas num arquivo só, facilitando a vida do programador.

0 0

[4] Comentário enviado por claudiovfernande em 04/08/2004 - 16:38h

Só avaliei a função isEmail. Funciona bem, todavia não protege contra espaços em branco nos caracteres do email, o q pode ocasionar alguns problemas.

0 0