Informações em formulários são muito importantes para algumas páginas web. Muitas
vezes essas informações colocadas nos formulários são enviadas de volta ao servidor.
Mas o JavaScript consegue uma funcionalidade para validar as informações postas em
formulários antes de enviá-la ao servidor. Em primeiro lugar eu quero lhe mostrar como
se pode validar os formulários. Em seguida nós vamos dar uma olhada nas possibilidades
de se enviar de volta informações com JavaScript ou HTML.
Antes de mais nada, vamos criar um script simples. A página HTML terá dois elementos textuais. O usuário deve escrever o seu nome no primeiro e um endereço de e-mail no segundo elemento. Mas você pode escrever qualquer outra coisa nos elementos de formulário e pressionar o botão. Tente também não colocar nada e pressionar o botão.
A respeito das informações que se
pode escrever no primeiro elemento, você vai receber uma mensagem de erro se não entrar
com nenhum dado (não escrever nada). Qualquer informação escrita é tida como válida.
É claro que isto não previne que algum usuário coloque o seu nome errado. O browser
aceita até números. Se você escrever o seu nome como '17' você terá um retorno como
'Olá 17!'.
Já o segundo formulário é um pouco mais sofisticado. Tente colocar uma seqüência
simples - o seu nome, por exemplo. Ele simplesmente não funciona (a não ser que você
tenha um @ no seu nome...). O critério para que a informação seja aceita como um
endereço de e-mail válido é o @. Um único @ irá funcionar - mas certamente isto não
fará muito sentido. O ponto é que todo endereço de correio eletrônico na Internet tem
um @, e por isso parece ser mais apropriado checar os @s aqui.
Qual é a cara dos scripts para a validação desses dois elementos de formulário? Ei-los:
<html>
<head>
<script language="JavaScript">
<!-- Hide
function test1(form) {
if (form.text1.value == "")
alert("Coloque alguma informação, por favor!")
else {
alert("Olá "+form.text1.value+"! Informação de fromulário ok!");
}
}
function test2(form) {
if (form.text2.value == "" ||
form.text2.value.indexOf('@', 0) == -1)
alert("Não é um e-mail válido!");
else alert("OK!");
}
// -->
</script>
</head>
<body>
<form name="first">
Enter your name:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Teste a Informação" onClick="test1(this.form)">
<P>
Enter your e-mail address:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="Teste a Informação" onClick="test2(this.form)">
</body>
Primeiro dê uma olhada no código
HTML da seção body. Nós só criamos dois elementos textuais e dois botões. Os botões
convocam as funções test1(...) ou test2(...), dependendo de qual deles for
pressionado. Nós substituímos this.form pelas funções para que pudéssemos
direcionar os elementos corretos nas funções depois.
A função test1(form) testa se a seqüência é vazia, o que é feito através de if
(form.text1.value == "")... . 'form' é a variável que recebe o valor
'this.form' na declaração da função. Nós obtemos o valor do elemento colocado como
dado por meio do uso de 'value' em combinação com form.text1. Para verificarmos
se a seqüência é vazia nós a comparamos com "". Se a seqüência colocada
como dado for igual a "", então nenhuma informação foi dada. O usuário verá
uma mensagem de erro. Se alguma coisa for colocada, então o usuário verá um ok.
O problema aqui é que o usuário pode também colocar espaços vazios como informação.
E isto é interpretado como um dado válido! Se você quiser, também pode checar essas
possibilidades e excluí-las, naturalmente. Acho que isso seria muito fácil com os dados
disponíveis aqui.
Agora dê uma olhada na função test2(form). Esta função compara novamente a
seqüência colocada como dado com a seqüência vazia "" para se assegurar de
que alguma informação foi dada. Porém nós acrescentamos algo ao comando if. O símbolo
|| é chamado de operador OU. Você já foi apresentado pra ele na parte 6 desta
introdução.
O comando if serve para checar se o primeiro ou o segundo elemento da comparação é o
verdadeiro. Se pelo menos um deles for verdadeiro, então todo o comando if será
verdadeiro e o comnado seguinte será executado. Isso significa que você verá uma
mensagem de erro se a sua seqüência for vazia ou se não existir um @ nela.
A segunda operação no comando if verifica se a seqüência posta como dado contém
um @.
Quais são as diferentes possibilidades que existem para se enviar o conteúdo de um
formulário? A maneira mais fácil é enviar os dados de um formulário via e-mail.
Este é o método que vamos olhar mais de perto. Se você quiser ter um retorno sem
e-mail, o seu servidor terá que manejar os dados automaticamente e, para isso, você
terá que usar no momento um arquivo CGI. Você precisaria de CGI se quisesse, por
exemplo, criar um engenho de busca como o Yahoo, onde o usuário obtém o resultado logo
depois de ter fornecido os dados pelo formulário. A pessoa não precisa esperar até que
as pessoas que mantêm este servidor leiam os dados e então procurem a informação
requisitada. Isto é feito automaticamente pelo servidor. O JavaScript não tem a
funcionalidade para fazer coisas como essas. Mesmo que você queira criar um livro de
visitas, não vai conseguir com JavaScript que o servidor acrescente automaticamente a
informação numa página HTML hospedada nele. Neste momento só o CGI pode fazer isto.
Mas, por outro lado, você pode criar um livro de visitas onde as pessoas podem responder
via e-mail. Entretanto, você terá que dar entrada no retorno manualmente. Mas isto
estaria ok se você não espera receber 1000 retornos de mail por dia.
Este script aqui é puro HTML. Por isso, não se precisa de JavaScript aqui! Só se,
naturalmente, você quiser checar os dados colocados antes de que o formulário seja
enviado. Mas eu devo dizer também que o comando 'mailto' não funciona em todos os
browsers, apenas nos mais novos.
<FORM METHOD=POST ACTION="mailto:seu_email@vai.aqui"> <H3>Você gosta desta página?</H3> <INPUT NAME="choice" TYPE="RADIO" VALUE="1">Não é nada.<BR> <INPUT NAME="choice" TYPE="RADIO" VALUE="2" CHECKED>Perda de tempo.<BR> <INPUT NAME="choice" TYPE="RADIO" VALUE="3">O pior site da Net.<BR> <INPUT NAME="submit" TYPE="SUBMIT" VALUE="Enviar"> </FORM>
Você receberá o retorno através de e-mail fazendo desse jeito. O único problema é que você vai receber um mail que vai parecer um pouco criptográfico à primeira vista. Algumas vezes todos os espaços são preenchidos com '+', e outras vezes com '%20'. Por+isso,+ele+poderia+se+parecer+com+isto+aqui. Existem alguns programas corretores na Net, eu acho, que farão com que o mail recebido adquira um formato mais limpo.
Existe uma
outra coisa legal que pode fazer com que os elementos do seu formulário pareçam um pouco
mais amigáveis para o usuário. Você pode definir que elemento deve ser enfocado no
começo. Ou então você pode dizer ao browser para enfocar no formulário o lugar onde o
dado fornecido está errado. Isto significa que o browser posicionará o cursor no
elemento do formulário que foi especificado para que o usuário não o envie antes de
colocar os dados requisitados. Você pode implementar este recurso com o seguinte script:
function setfocus() {
document.first.text1.focus();
return;
}
Este script colocará o foco no primeiro elemento de texto do script que eu demonstrei acima. Você deverá especificar o nome do formulário todo - no caso aqui, chamado de first -, e o nome do elemento de formulário único - que aqui é text1. Se você quiser colocar o foco neste elemento quando a página estiver sendo carregada, você pode adicionar a propriedade onLoad no seu tag de <body>. Isto ficaria assim:
<body onLoad="setfocus()">