Aula10 – Aplicações Web em HTML utilizando Validação de Formulário em JavaScript Prof.ª Pedro Toledo e Prof.ª Erika Miranda

Objetivo: Desenvolver aplicações web em HTML utilizando validação de formulário em JavaScript Pré requisitos:

Domínio das técnicas de programação básicas.

Conhecimento dos componentes básicos do HTML.

Validação de Formulários em Javascript

A validação de formulários é um dos usos mais comuns na programação Javascript. A validação de dados por meio da programação Javascript é muito fácil e rápida por que a verificação é feita no browser, sem necessitar ir até o servidor para transmitir dados.

A validação é feita para não haver inconsistência de dados quando forem enviados para a base de dados. Uma checagem no servidor seria necessário no caso do Javascript estar desligado ou se, de alguma maneira, alguém tentar driblar a validação de forma maliciosa ou por engano. Para a maioria das pessoas a validação Javascript consegue economizar muito tempo.

Para podermos trabalhar com a validação de formulário, foi criado um formulário padrão para podermos testar. A figura abaixo será o nosso exemplo:

Com uma noção de onde pretendemos chegar vamos construir o nosso formulário baseado na imagem

acima: Exemplo:

O codigo HTML é uma estrutura de tabela com um formulário, tudo bem simples. Basta apenas prestar

atenção para os nomes das caixas de entradas e dos botões radio bos para não ter problemas na hora da programação.

No formulário acima, o evento onSubmit chama uma função chamada validaForm que será responsável pela validação dos dados do formulário. Se os dados estiverem corretos retornará true e o formulário será enviado. Caso contrário uma mensagem será mostrada determinando o local do erro.

Com o formulário criado agora vamos partir para o desenvolvimento do código. Neste formulário será feita a checagem de seis caixas de entrada de dados e de um radio box.

Para validação das as caixas de entradas é feita uma verificação se foi digitado algum valor. Para o campo e-mail a verificação é mais elaborada para saber se é um endereço de email válido. Para o campo telefone, só são aceito números. Para o campo Data de nascimento é verificado se a data esta correta com o padrão estabelecido. Para o campo Sexo é verificao se algum valor foi selecionado.

Exemplo:

Linha 1 – Declaração da função responsável pela validação dos dados do formulário. Linha 2 – Declaração de uma variável para economizar tempo e prováveis erros de digitação. Linha 4 – Verificação se foi digitado algum valor para o campo nome. Se retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção. Linha 10 – Verificação se foi digitado algum valor para o campo user. Se retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção. Linha 16 – Verificação se foi digitado algum valor para o campo senha. Se retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção. Linha 22 – Verificação se foi digitado algum valor para o campo email. Se retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção. Linha 28 – Declaração de uma variável que armazenara a posição do caractere “@” na caixa de entrada email. Linha 29 – Declaração de uma variável que armazenara a posição do caractere “.” na caixa de entrada email. Linha 30 – Declaração de uma variável que armazenara a quantidade de caracteres digitados na caixa de entrada email. Linha 31 – Estrutura condicional para verificação se o caractere “@” está no mínimo depois de três letras, o caractere “.” está no mínimo depois de seis e se foi digitado no mínimo 9 letras. Se retornar falso, é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção. Linha 37 - Verificação se foi digitado algum valor para o campo telefone. Se retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção. Linha 43 - Verificação se o valor digitado no campo telefone possui apenas números. Se retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção. Linha 50 – Declaração de uma variável que armazena uma nova Data. Linha 51 - Declaração de uma variável que armazena o valor do ano no formato completo com 4 caracteres. Linha 52 – Declaração de uma variável que separa o valor da caixa de entrada referente a data de nascimento e coloca em uma matriz, a “/” é utilizada para separar os valores entre elas, é suposto ter 3 valores referente a dia, mês e ano respectivamente. Linha 53 - Estrutura condicional para verificação se tem 3 valores para a matriz criada. Se retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção. Linha 54 - Declaração de uma variável que recebe o primeiro valor da matriz, valor esse referente ao dia. Linha 55 - Declaração de uma variável que recebe o segundo valor da matriz, valor esse referente ao mês. Linha 56 - Declaração de uma variável que recebe o terceiro valor da matriz, valor esse referente ao ano completo com 4 caracteres. Linha 57 - Declaração de uma variável que faz a verificação das variáveis criadas anteriormente referente a dia, mês e ano, é feita uma checagem se os valores são números e se estão no padrão estabelecido. Linha 58 - Estrutura condicional para checagem se o resultado da verificação dos dados digitados. Se retornar falso é é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção. Linha 69 - Verificação se foi selecionado algum valor referente ao sexo. Se retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção. Linha 73 – Se todos os valores foram digitados corretamente a função vai retornar true e o formulário será enviado. Sempre lembrando que essa validação é boa, mas pode ser feito muito mais coisas para aprimorar, até mesmo trabalhar com programação orientada a objeto com o intuito de criar métodos que façam a análise dos dados.

Atividades

1. Com base na aula 09, foi criado um formulário para cadastro de aluno, faça as validações dos inputs em Javascript.