Web Sites com Ajax

JavaScript

Validação de formulário

Os elementos de formulário são utilizados ao extremo em websites e aplicações web. E não é por menos. São com eles que conseguimos capturar informações do usuário que nos permitem saber de seus gostos, vontades e atitudes em um ambiente como a internet.

Porém, infelizmente nem todo usuário é fiel ao informar os dados que solicitamos, ou, às vezes, preenchem-os sem dar muita importância e atenção. Esse tipo de atitude gera informações erradas que não serão úteis para nossos sistemas.

Para amenizar essa prática, podemos validar os dados que o usuário está nos enviando para recebermos as informações com uma parcela de certeza maior sobre a sua veracidade.

A linguagem JavaScript é capaz de acessar qualquer objeto em uma página da web, então podemos acessar os elementos do formulário que desejamos e validar o seu conteúdo.

Veja esta página: Validação de Formulário. Nela estão contidos os principais elementos de um formulário - text, radio, select, textarea, checkbox - e o nosso objetivo é aprender a validar cada um desses tipos de objeto.

Todo o processo de validação está no código-fonte da página acima com comentários para cada parte do script. Com isso, estou passando algumas informações importantes para você ter um embasamento maior ao fazer análise do script.

Meu objetivo com isso é que você se torne apto a analisar scripts e, dessa forma, ser capaz de estudá-los e desvendá-los.

Não estou sugerindo que você copie scripts dos outros, mas sim analisar aqueles que lhe chamarem a atenção e, com isto, aprender cada vez mais.

Caso precise copiar o script, ou parte dele, de alguém, peça autorização e cite a fonte. Essa é uma atitude bacana.

Algumas informações sobre formulário

Particularmente prefiro trabalhar com o DOM e o JavaScript em conjunto para validar meus formulários mas, como estamos falando especificamente sobre JavaScript, falaremos sobre o DOM depois.

Chamando a função que verifica os dados

Certamente você terá uma função que verificará os dados submetidos pelo formulário e, essa, é invocada mediante a um evento que pode ser por exemplo, o evento onsubmit. E, juntamente com ela pode haver a declaração return. Vejamos um exemplo:

<form ... onsubmit="return ValidaForm(this);" ...>

Sobre o return

Quando declaramos o return false na função, significa que não queremos que o formulário seja processado, ou seja, alguns dos dados não estão de acordo com o que esperávamos, então o bloqueamos. Quando tudo estiver devidamente preenchido, setamos o return true, o que significa que o formulário pode ser enviado.

Sobre a palavra-chave this

Ela faz uma referência genérica a um objeto, além de ser uma forma prática de refereciar a um formulário ou aos objetos deste.

Ela pode ser utilizada dentro da tag do form ou de seus objetos. Se precisarmos utilizá-la dentro da tag de algum objeto mas para referenciar ao formulário em questão, a utilizamos juntamente com a palavra form, assim: this.form. O que seria a mesma coisa que document.nomeForm.

Quando a utilizamos em um elemento de formulário, estamos referenciando a esse elemento da mesma forma como se estivéssemos utilizando document.nomeForm.nomeElemento.

Quando desejamos apenas extrair o valor contido no elemento, basta acrescentarmos à palavra value, assim: this.value. O que teria a mesma forma que document.nomeForm.nomeElemento.value

Faça a análise do script nesta página Validação de Formulário e bons estudos. ;)