AGRUPAMENTO DE ESCOLAS DE SANTA COMBA DÃO

Redes de Comunicação
2013/2014 Ficha de Trabalho nº 8
Curso Profissional de Técnico
de Gestão e Programação de Módulo 4 – Desenvolvimento de Páginas Web Estáticas
Sistemas Informáticos
Nome: __________________________________________________ N.º: _____ Turma: _______ Data: ____ / ____ / _____

Linguagem JavaScript – Validação de formulários: Caixas de texto

CONTEÚDOS:
- Utilização de funções;
- função alert();
- Utilização dos eventos para formulários:
- onFocus()
- onClick()
- onSubmit()

 alert() - mostra uma janela com a mensagem que estiver dentro dos parêntesis e um botão de
confirmação para que a janela seja fechada;

 onFocus() - é acionado quando o cursor é colocado sobre ou dentro de um determinado elemento (por
exemplo dentro de uma caixa de nome);

 onClick() - é acionado quando o botão do rato é pressionado sobre um elemento do HTML (por
exemplo, um botão);

 onSubmit() - é acionado quando um formulário é submetido. É utilizado dentro da tag <form> uma vez
que a maioria dos browsers submete o formulário quando a tecla ENTER é pressionada. Assim,
assegura-se que o formulário será validado mesmo quando o utilizador não clicar no botão Submeter.

Nota: O acesso a objetos de baixo nível de um formulário (caixa de texto, checkbox, etc.) é feito através
dos objetos de alto nível.
Por exemplo, para aceder ao conteúdo de uma caixa de texto com o nome caixatxt inserida dentro de um
formulário de nome form1 seria, necessário o código seguinte:
document.form1.caixatxt.value
Ou abreviando (no caso do JavaScript se encontrar na página HTML)
form1.caixatxt.value

Exercício 1 - Validação de texto numa caixa de texto <input type=text>

1. Crie uma página em linguagem HTML de nome ft8_ex1.html e com as seguintes especificações:
- Na secção HEAD o texto: Ficha de Trabalho nº 8
- Na secção BODY:
- O texto: “Validação de uma caixa de texto”, com um cabeçalho H3
- Um formulário com os atributos: name= “ft8_ex1”, method=”post”, action=”” e com os campos:
- Nome: campo do tipo text
- Enviar: campo do tipo submit

2. Acrescente um script em JavaScript, de modo a que apareça uma janela de alerta para informar o
utilizador que deve digitar o seu nome.

1
Professora: Susete Esteves
Exercício 2 - Validação de números numa caixa de texto <input type=text>

1. Crie uma página em linguagem HTML de nome ft8_ex2.html e com as seguintes especificações:
- Na secção HEAD o texto: Ficha de Trabalho nº 8
- Na secção BODY:
- O texto: “Validação de números numa caixa de texto”, com um cabeçalho H3
- Um formulário com os atributos: name= “ft8_ex2”, method=”post”, action=”” e com os campos:
- Idade: campo do tipo texto, size=”3”
- Enviar: campo do tipo submit

2. Acrescente à página HTML um script em JavaScript, de modo a que apareça uma janela de alerta para
informar o utilizador que na caixa de texto só pode inserir números.

Nota: A função isNaN() é a abreviatura de “is not a number” – verifica se o que se encontra dentro
de parênteses não é um número.

2
Professora: Susete Esteves
3. Acrescente ao exercício anterior uma validação na caixa de texto para que não seja possível enviar o
campo idade sem dados. Deverá aparecer uma caixa de alerta com a mensagem: “O campo está em
branco!”. Grave o exercício com o nome ft8_ex2_1.html.

Exercício 3 - Validação de números numa caixa de texto <input type=text>

1. Crie uma página em linguagem HTML de nome ft8_ex3.html e com as seguintes especificações:
- Na secção HEAD o texto: Ficha de Trabalho nº 8
- Na secção BODY:
- O texto: “Validação do e-mail e do numero de carateres numa caixa de texto”, com um cabeçalho
H3
- Um formulário com os atributos: name= “ft8_ex3”, method=”post”, action=”” e, dentro de uma
tabela, os campos:
- E-mail: campo do tipo texto
- Palavra-passe: campo do tipo password
- Enviar: campo do tipo submit

2. Acrescente à página HTML um script em JavaScript, que satisfaça as seguintes condições:

 Os campos não possam ser enviados em branco;
 O campo para o e-mail aceitar um e-mail que contenha os carateres @ e . (ponto);
 O campo palavra-passe aceitar uma palavra-passe com pelo menos 8 carateres.

Notas:

length - É um inteiro que indica o comprimento da cadeia de caracteres.

Exemplo: document.formulario.campo.value.length <8

indexOf() - Método que reenvia a posição de uma cadeia parcial a partir de uma posição
determinada. (começando do início da cadeia principal seja na posição 0).
Exemplo: document.formulario.campo.value.indexOf(”@”)

3
Professora: Susete Esteves