Validação do lado do cliente é uma das mais populares utilidades do Javascript. Eu não gosto do fato de construir uma aplicação que roda do lado do servidor e ter que validar todas as minhas entradas do lado do servidor, principalmente se posso validar do lado do cliente. Sei que isso pode causar problemas desagradáveis a nível de segurança - é muito fácil uma pessoa mal intencionada desabilitar o javascript em seu browser.

Validação é um tópico de grande importância, deveria ser extensivamente coberto por todos os tutoriais na Web. De preferência remodelando antigas idéias, como por exemplo o evento foco. Podemos por exemplo mostrar um ícone cada vez que o usuário sair de um campo, indicando se ele preencheu o campo corretamente ou não, ou ainda se ele deixou em branco um campo de preenchimento obrigatório. Podemos colocar ícones na TAG Label, assim que abrir o formulário e alterando esses ícones à medida que passamos pelos campos e os preenchemos. Os ícones darão o status dos campos.

Um exemplo para um campo de formulário requerido, verificado via CSS, Javascript e HTML.

Isso é muito simples. O elemento Label inicia com uma classe "required" para mostrar um ícone indicando que ele é de preenchimento obrigatório. A função Javascript checkRequired('subject') é chamada no evento OnBlur (ao perder o foco), e verifica sempre o campo de onde o foco acabou de sair.

O CSS concede a cada label um espaço extra de 22 pixels, os ícones ocupam cerca de 15 pixels.

Aqui nós definimos duas funções javascript: uma para encontrar a label associada a um ID específica, e outra para checar se o campo foi realmente preenchido. E conseqüentemente associando uma nova classe a label o que fará aparecer o ícone de status. Isso é uma maneira simples de fazer esse tipo de validação. Outras funções podem ser criadas para ser acopladas a essa função, como por exemplo funções para analisar se um endereço de e-mail foi preenchido em seu formato correto. Esta técnica pode ser implementada por exemplo para desabilitar o botão submit ate que o formulário tenha sido preenchido corretamente.

No último truque vamos contemplar os dados que somente devem permitir um formato específico. De preferência aqueles que rejeitam a entrada de dados que não estejam no formato certo. Um exemplo clássico disso é um número de telefone incluindo o código de área (82)555-5555. Com o javascript podemos receber a digitação do usuário ignorando tudo o que não for números e providenciando para que os números sejam exibidos como no exemplo acima.

Essa técnica pode ser adaptada e tornar-se muito mais abrangente, sendo usada como por exemplo para formatar data, hora ou qualquer formato de campo que você queira padronizar. Veja esse exemplo para entrar datas, é recomendável que você cheque o código para saber como se faz.

Para ilustrar melhor as idéias desse artigo foi criado um formulário que faz uso de todas as técnicas comentadas aqui. Espero ter lhe inspirado a descobrir novos caminhos de prover usabilidade usando CSS e javascript.

Esse artigo foi traduzido e o original encontra-se em:

• http://www.sitepoint.com/print/1273?

Desejo esclarecer que não gosto de fazer traduções "ao pé da letra", portanto em alguns pontos uso palavras e expressões diferentes das usadas pelo autor, mas que não alteram em nada a semântica do texto.

Obrigado