Validação e Controle de Formulários com JavaScript

Prévia do material em texto

Aula 9 – Validação e controle de formulários 
 
Introdução 
 
Nesta aula, continuaremos com a linguagem JavaScript® (uma das tecnologias do lado do cliente), explicando a 
criação de formulários e os procedimentos de validação e controle dos mesmos. 
 
Segundo Rocha, os componentes de formulário são os objetos HTML mais utilizados em JavaScript. Por 
componentes de formulário nos referimos a qualquer campo de entrada de dados dentro de um bloco HTML 
<FORM>, como botões, caixas de seleção, caixas de texto e botões de “rádio”. Eles são a principal forma de entrada 
de dados disponível no HTML. 
 
Os objetos de formulário consistem de 12 (doze) objetos, situados abaixo de Form, no modelo de objetos do 
documento JavaScript. São representados através de elementos HTML específicos: <INPUT>, <SELECT>, <OPTION> e 
<TEXTAREA>. 
 
Uma das principais aplicações do JavaScript é a validação de dados em aplicações Web. Verificar se os campos de um 
formulário foram preenchidos corretamente antes de enviar os dados a um programa no servidor é uma tarefa 
realizada eficientemente com JavaScript. Na maior parte das aplicações, JavaScript é capaz de fazer toda a 
verificação localmente, economizando conexões de rede desnecessárias. 
 
Form 
 
O objeto Form é o mais alto da hierarquia dos componentes de formulários. Através dele temos acesso aos 
componentes existentes dentro de um bloco HTML <form>, que podem ser: botões, caixas de texto, caixas de 
seleção, etc. 
 
Não há um objeto Form em JavaScript. Ele precisa estar presente no código HTML. Este bloco não é visível na página. 
Serve apenas para agrupar componentes de entrada de dados, torná-los visíveis e associar seus dados a um 
programa no servidor. Ou seja, para se acessar as propriedades de um formulário, é preciso ter acesso ao 
documento que o contém. Exemplo: 
 
Form1 = document.meuformulario; 
 
Um documento pode conter vários formulários. Cada um é armazenado em uma posição de um array chamado 
forms. Exemplo: 
 
Form1 = document.forms[0]; 
 
Objeto form 
 
Veja abaixo a sintaxe do objeto Form em HTML. Todos os atributos (em itálico) são opcionais para uso em JavaScript: 
 
<FORM 
NAME="nome_do_formulário (usado por JavaScript)" 
ACTION="url para onde será enviado o formulário" 
METHOD="método HTTP (GET ou POST)" 
ENCTYPE="formato de codificação" 
TARGET="janela alvo de exibição da resposta do formulário" 
ONRESET="código JavaScript" 
ONSUBMIT="código JavaScript" > 
... corpo do formulário ... 
</FORM> 
 
 
 
 
Atenção! 
 
A maior parte das propriedades de Form são strings que permitem ler e alterar atributos do formulário definidos no 
elemento HTML <FORM>. A propriedade elements é a exceção. Ela contém um vetor com referências para todos os 
elementos contidos no formulário, na ordem em que aparecem no código. 
 
Como manipular um formulário 
 
 
Elementos de um formulário 
 
Incluem todos os elementos de formulário e imagens que estão contidas no bloco <FORM> da página HTML. Estes 
objetos podem ser referenciados pelos seus nomes – propriedades de Form criadas com o atributo NAME de cada 
componente, ou através da propriedade elements – vetor que contém todos os elementos contidos no bloco 
<FORM> na ordem em que aparecem no HTML. 
 
 
 
Métodos 
 
São utilizados para submeter os dados ao programa no servidor ou para reinicializar o formulário com os seus 
valores originais. Podem habilitar outros botões (tipo Button) ou qualquer objeto do HTML que capture eventos que 
implementam a mesma funcionalidade dos botões <RESET> ou <SUBMIT>. 
 
 
 
Eventos 
 
Reinicialização do formulário e envio dos dados ao servidor, desencadeados por botões Reset e Submit ou por 
instruções JavaScript. 
 
São interceptados pelo código contido nos atributos HTML: ONSUBMIT ou ONRESET. 
 
 
 
Botões 
 
O HTML disponibiliza 3 (três) tipos de botões: Button, Reset e Submit. Possuem a mesma aparência na tela, 
entretanto efeitos diferentes quando apertados. Submit e Reset possuem eventos já definidos pelo HTML para 
enviar e limpar o formulário ao qual pertencem. Button é inoperante a menos que possua um atributo de eventos 
ONCLICK, com o código que será interpretado quando o usuário apertá-lo. 
 
<INPUT TYPE="button" 
NAME="nome_do_botão" 
VALUE="rótulo do botão" 
ONCLICK="Código JavaScript" 
ONFOCUS="Código JavaScript" 
ONBLUR="Código JavaScript"> 
 
Os métodos dos botões Submit, Reset e Button estão associados a eventos específicos: 
 
• click(): Executa o código associado a 
 onclick sem que o botão tenha sido clicado; 
• focus(): Ativa o botão; 
• blur(): Desativa o botão. 
 
Campos de Texto 
 
Os objetos do tipo Password, Text e Textarea são usados para entrada de texto. Possuem as mesmas propriedades. 
 
Os objetos Text e Password definem caixas de texto de uma única linha enquanto que os objetos Textarea realizam 
quebras de linha. 
 
 
 
 
Objetos Checkbox e Radio 
 
Representam dispositivos de entrada booleanos cuja informação relevante consiste em saber se uma opção foi 
selecionada ou não. A diferença entre os dois são a aparência na tela do browser e a quantidade de elementos que 
podem ser escolhidos para cada grupo de dispositivos. 
 
 
 
Select & Option 
 
Representa um grupo de opções; um ou mais elementos podem ser selecionados. 
 
 
 
Caixas e listas de seleção como as mostradas na figura acima são representadas em JavaScript por objetos Select, 
que refletem o elemento HTML <SELECT>. Um objeto Select pode ter uma ou mais objetos Option, que refletem 
elementos <OPTION>. 
 
 
 
Propriedades do Objeto Select: 
 
 
 
 
Validação de Formulários 
 
Exemplo 1: 
 
Criação do formulário e dos campos onde o usuário entrará com os dados. Os campos devem ser nomeados 
corretamente para que a validação possa ser realizada. 
 
 
 
Note que, na declaração do formulário, temos um OnSubmit. Ele serve para chamar a função Javascript responsável 
pela validação. Caso todos os campos estejam preenchidos corretamente ele redireciona para o action. 
 
 
 
Saiba Mais 
 
Você já havia parado para pensar sobre isso? 
O quanto a utilização das mídias digitais tem afetado o nosso comportamento? 
Consegue identificar alguma modificação em você ou em pessoas de seu círculo mais íntimo de relacionamento? 
 
Para simplificar, vamos analisar apenas a influência do celular e de recursos como Facebook e Twitter na tela 
seguinte. 
 
Objeto File (ou FileUpload4) 
 
Representa um dispositivo de entrada que permite o envio de um arquivo no cliente ao servidor. 
 
O objeto File é criado em HTML através de um elemento <INPUT>. A sintaxe geral do componente está mostrada 
abaixo: 
 
<INPUT TYPE="file" 
NAME="nome_do_componente" 
ONBLUR="código JavaScript" 
ONFOCUS="código JavaScript" 
ONCHANGE="código JavaScript" > 
 
 
Um objeto File só poderá ser manipulado em JavaScript se seu descritor <INPUT> estiver dentro de um bloco 
<FORM>...</FORM>. Como qualquer outro componente, é um elemento do formulário e pode ser acessado através 
do vetor elements, ou através do seu nome, especificado pelo atributo NAME. O trecho de código abaixo mostra 
como acessar um elemento File chamado nomeFup e que é o sétimo elemento do primeiro formulário de uma 
página: 
 
fup = document.forms[0].nomeFup // ou ... 
fup = document.forms[0].elements 
 
Para que seja possível a transferência de arquivos, o servidor deverá permitir o recebimento de dados. O browser 
também deve passar os dados ao servidor usando o método de requisição POST e no formato multipart/form-data, 
que pode ser definido através do atributo ENCTYPE de <FORM> ou na propriedade encoding, de Form: 
 
<FORM ENCTYPE="multipart/form-data" ACTION="..." METHOD="POST"> 
<INPUT TYPE="file"> 
</FORM> 
 
 
Todas as propriedades dos objetos File são somente-leitura. Estãolistadas na tabela abaixo: 
 
 
 
File só possui os dois métodos listados abaixo. Ambos provocam eventos de ativação/desativação do componente. 
 
 
 
Eventos 
 
Os eventos suportados são dois. Os atributos HTML abaixo respondem aos eventos interpretando o código 
JavaScript contido neles: 
 
• ONFOCUS – quando o usuário seleciona a caixa de textos ou o botão de File. 
 
• ONBLUR – quando o usuário, que tinha o coponente selecionado, seleciona outro componente.