Formulário usando Focus e Validação de Campos

Olá Flasheiros,

Hoje vamos aprender como fazer um formulário, usando o
focus e um script de validação que acusará se o usuário
deixar algum campo em branco e automaticamente ele voltará pro campo
que está faltando já com o focus acionado nesse campo.

Vamos então criar aqui um formulário com 8 campos,
vamos usar aqui: Nome, Data de nascimento com dia mes e ano, Endereço,
Telefone com prefixo e numero, e um campo de comentários.

Então vamos lá, precisaremos de 3 layers (camadas)
para concluir esse trabalho, no primeiro layer, colocaremos a ação:

_root.msgerro._visible=0; //Essa ação
vai esconder o movieclip da mensagem de erro

O que fizemos acima é criar um script que vai achar um
movieclip instanciado como “msgerro” (sem aspas) que colocaremos agora
no palo e com o _visible = 0 ele tornará esse movieclip invisível,
sendo que o _visible = 1 retorna como visível.

Então agora que colocamos essa ação no frame
vamos criar um novo layer com o nome de Msg_erro, e dentro dele vamos desenhar
uma retanguo com espaço para caber uma frase “Sua mensagem não
foi concluída, por favor preecha os campos:” tem que caber tb um
botãozinho de fechar, um campo de texto dinamico, e outra frase abaixo
do tempo dinamico, no meu arquivo eu usei Width 305 x Height 140.

Então feito o quadrado nessa dimensão famos selecionar
ele e apertar a tecla F8 e transforma-lo num movieclip, então estaremos
agora dentro do movieclip, teremos nesse movieclip 3 layers, no primeiro layer
vamos colocar um botão de fechar esse quadradinho, pode ser aquele que
todo mundo desenha com um X no meio para o povo fechar o movieclip, nesse botão
colocaremos a ação:

on (rollOver) { // Ao passar o mouse por cima do botão
_root.msgerro._visible=0; // Apague o moveclip msgerro do filme
}

Então criaremos um novo layer onde terão 4 campos
de texto, o primeiro será estático, com a frase “Sua mensagem
não pode ser concluida,
por favor preencha o campo:”, abaixo dele criaremos um campo de texto dinamico,
e colocaremos a var dele de “erro” (sem aspas) e para ficar mais bonito,
duplicaremos esse campo de texto dinamico com a mesma var “erro”,
mas se quiser pode usar um campo só mesmo, eu fiz assim pra colocar um
atraz do outro e dar aquele efeito de sombra, usando uma fonte branca, e no
outro a cor da fonte preta.

Por fim vamos criar o ultimo campo de texto abaixo de todos,
escrevendo “E tente novamente” (sem aspas), o ultimo layer já
é o do quadrado que criamos ao transformar tudo em movieclip, olha no
meu exemplo como ficou o quadrado com esses campos:

Assim ficará a imagem com mensagem de erro:

Agora que criamos e terminamos esse movieclip, vamos voltar para
a cena principal do filme e vamos arrastar uma cópia desse movieclip
que está na biblioteca, pro palco, e vamos dar o nome de instancia pra
ele de “msgerro” (sem aspas), se testar o filme agora, não
vai aparecer nada, pois a ação _root.msgerro._visble=0; está
deixando ele invisivel no começo do filme.

Agora criaremos um novo layer no palco principal, até
agora tínhamos 2, o de ações e o do movieclip msgerro,
vamos criar mais um, onde ficará outro movieclip que terá o formulário
e os botões de enviar e limpar, então vamos no menu Insert / New
Symbol / e vamos criar um movieclip, no primeiro layer vamos fazer uns retangulos
que ficarão de fundo do campo de input text, e os textos estáticos
indicando o que digitar nos campos, olha a ordem:

Nome: [desenho do fundo do campo]
Data de Nascimento : Aqui colocaremos 3 desenhos de campos pequenhos, para digitar
dia mes e ano em campos separados
Endereço: [desenho do fundo]
Telefone: Aqui tb com uma caixa pro prefixo e outra pro numero de telefone
Comentários: Esse deve ser maior pois é onde vão digitar
os comentários

A imagem deverá ficar assim:

Agora vamos criar os campos Input text nesses espaços,
em cada um você vai colocar uma var diferente, nessa ordem:

Campo input text Nome: var = “nome” (sem aspas)
Campo input text Data de nascimento: Aqui são 3 campos cada um com uma
var, primeiro campo var = “dia”, segunda campo var = “mes”,
terceiro campo var = “ano” (tudo sem aspas)
Campo input text Endereço: var = “endereco” (sem aspas)
Campo input text Telefone: Aqui são dois campos tb, no primeiro var =
“codigo_de_area” e no segundo var = “telefone” (tudo sem
aspas), é até bom colocar aqui quando for criar os campos de input
text, no Maximum Characters da barra de propriedas, os numeros de caracteres
dos campos, no caso 2 pro campo codigo_de_area e 8 ou 9 para telefone
Campo input text Comentários: var = “comentarios” (sem aspas)
– Nesse último campo de texto, vale lembrar que devemos mudar o item
Line Type para multiline, pois nesse campo pode ter quebra de linhas.

Agora criaremos dois botões e colocaremos no palco, serão
os famosos botões de enviar e limpar, no botão enviar, colocaremos
a seguinte ação:

on (release, keyPress ““) { //
ao soltar o mouse ou pressionar a tecla Enter
envia(); // execute a função envia
}

No botão limpar colocaremos a seguinte ação:

on (release) { // ao soltar o botão
limpa(); // execute a função limpa
}

Agora pra tudo fazer sentido, vamos criar mais um layer nesse
movieclip, com as ações, a ação do frame será
a seguinte:

System.UseCodePage = true; //Esse código é
para não ter problemas de acentuação ao processar o formulário
Selection.setFocus(“nome”); // Inicie o focus no campo nome
stop(); // Ação para parar o filme nesse frame
function envia() { //Aqui começa a ação envia que será
usada ao clicar no botão envia ou quando apertado a tecla Enter
if (nome eq “”) { // Se o campo nome estiver vazio …
_root.msgerro._visible=1; // faça aparecer o movieclip mensagem de erro
_root.msgerro.erro= “Nome”; // O Campo de texto dinamico de dentro
do movieclip msgerro receberá o texto Nome
Selection.setFocus(“nome”); // Volte o focus para o campo de texto
nome
} else if (dia eq “”) { // Senão se o campo dia não
estiver preenchido …
_root.msgerro._visible=1; // faça aparecer o movieclip mensagem de erro
_root.msgerro.erro= “Data de Nascimento(Dia)”; // O Campo de texto
dinamico de dentro do movieclip msgerro receberá o texto Data de Nascimento
(Dia)
Selection.setFocus(“dia”); // Volte o focus para o campo dia
} else if (mes eq “”) { // Senão se o campo mes não
estiver preenchido …
_root.msgerro._visible=1; // faça aparecer o movieclip mensagem de erro
_root.msgerro.erro= “Data de Nascimento (Mes)”; // O Campo de texto
dinamico de dentro do movieclip msgerro receberá o texto Data de Nascimento
(Mes)
Selection.setFocus(“mes”); // volte o focus para o campo de texto
mes
} else if (ano eq “”) { // Senão se o campo de texto Ano não
estiver preechido …
_root.msgerro._visible=1; // faça aparecer o movieclip mensagem de erro
_root.msgerro.erro= “Data de Nascimento (Ano)”; // O Campo de texto
dinamico de dentro do movieclip msgerro receberá o texto Data de Nascimento
(Ano)
Selection.setFocus(“ano”); // volte o focus para o campo de texto
Ano
} else if (endereco eq “”) { // Senão se o campo de texto Endereço
não estiver preenchido …
_root.msgerro._visible=1; // faça aparecer o movieclip mensagem de erro
_root.msgerro.erro= “Endereço”; // O Campo de texto dinamico
de dentro do movieclip msgerro receberá o texto Endereço
Selection.setFocus(“endereco”); // volte o focus para o campo de texto
Endereço
} else if (codigo_de_area eq “”) { // Senão se o campo de texto
de código de area do Telefone não estiver preenchido …
_root.msgerro._visible=1; // faça aparecer o movieclip mensagem de erro
_root.msgerro.erro= “Telefone (digite o código de area)”; //
O Campo de texto dinamico de dentro do movieclip msgerro receberá o texto
Telefone (digite o código de area)
Selection.setFocus(“codigo_de_area”); // volte o focus para o campo
de texto Código de Area
} else if (telefone eq “”) { // Senão se o campo telefone não
estiver preenchido …
_root.msgerro._visible=1; // faça aparecer o movieclip mensagem de erro
_root.msgerro.erro= “Telefone “; //O Campo de texto dinamico de dentro
do movieclip msgerro receberá o texto Telefone
Selection.setFocus(“telefone”); // Volte o Focus para o campo de texto
telefone
} else if (comentarios eq “”) { // Senão se o campo de texto
comentários não estiver preenchido …
_root.msgerro._visible=1; // faça aparecer o movieclip mensagem de erro
_root.msgerro.erro= “Comentários”; //O Campo de texto dinamico
de dentro do movieclip msgerro receberá o texto Comentários
Selection.setFocus(“comentarios” ); // Volte o focus para o campo
de texto Comentários
} else { // Senão
_root.msgerro._visible=0; // apague o movieclip mensagem de erro, que na verdade
já está apagado
getURL(“http://www.seuservidor.com.br/seuarquivo.asp”, “”,
“POST”); //Aqui você pode colocar o endereço do arquivo
que vai processar seu formulário em asp, php ou cgi, que tambem pode
ser feito por loadvars
}
}
function limpa() { // função limpar que será usada no botão
limpar
nome = “”; // Apague o campo de texto nome
dia = “”; // Apague o campo de texto dia
mes = “”; // Apague o campo de texto mes
ano = “”; // Apague o campo de texto ano
endereco = “”; // Apague o campo de texto endereço
codigo_de_area = “”; // Apague o campo de texto código de area
telefone = “”; // Apague o campo de texto telefone
comentarios = “”; // Apague o campo de texto comentários
}

Então aqui só falta voltar para o palco principal
e puxar uma cópia desse movieclip da biblioteca para o palco, o que se
pode tambem fazer nesse trabalho é quando for criar os campos de input
text no caso do telefone etodos que são numéricos, podemos na
barra de ferramentas clicar na opção “Characters” e
escolher lá dentro a opção “Numerals (0-9)” para
que o usuário só possa usar numeros naquele campo de texto.

A grande vantagem pro usuário de fazer dessa forma, é
que o focus já vai ser posicionado no campo que ele deixo de preencher,
e mostrará na tela o que está faltando.

No fim de todo seu trabalho, o resultado do seu filme deverá ser esse
aqui:

Baixe aqui o fla desse exemplo zipado AQUI

Até a próxima !!!

Gustavo Henrique Carneirinho