Minicursos - Javascript

Validações - Parte 2


Vamos nos aprofundar um pouco nas validações em JavaScript e em como construir formulários mais detalhados, melhorando a navegabilidade do site. No primeiro tutorial sobre esse assunto me limitei a apenas verificar strings vazias e identificar campos numéricos.

Aqui vamos introduzir alguns parâmetros novos.

Vou começar com um teste de string vazia simples.

Validações em Javascript

Um resumo rápido do código:

Criei um pequeno formulário apenas com o campo Nome e um botão Enviar, que faz o submit do formulário, ou seja, o envio dos seus dados. Na tag form inseri o parâmetro onsubmit, que executa um comando no ato do envio dos dados do formulário. Nesse caso defini que ele deve receber o retorno da função validarTudo(). Se este retorno for true, completa a ação de enviar e, se for false interrompe o envio. Já dentro da função validarTudo() verifico se o campo nome do formulário é vazio e, se for, exibimos um alerta. É muito simples. Vamos começar a incrementar esse código com a seguinte linha:

Validações em Javascript

Funçao focus

Se executarem o código agora verão que após a mensagem de alerta o cursor já se posiciona automaticamente no campo Nome, destacando para o usuário qual é o campo que não está preenchido corretamente.

Muito bem. Começamos a entender o que significa focus().

Vamos alterar mais um pouco nosso código.

Validações em JavaScript

Destacado em vermelho, inseri um valor padrão para o campo texto, ou seja, logo que o usuário entrar na página já verá a instrução “Por favor, digite seu nome aqui” no campo onde isso deve ser feito. Em seguida fiz uso do parâmetro onfocus(), que é acionado sempre que o foco é posicionado em determinado elemento, que no nosso caso é o campo Nome do formulário. Para o exemplo acima, sempre que o foco for colocado nesse campo, ele fará o seguinte teste:

if(this.value == “Por favor, digite seu nome aqui”)
{
this.value = “”;
}

Se o valor contido no campo for o que havíamos definido como padrão, então ele o substituirá por uma string vazia, para que o usuário possa digitar seu nome sem nenhum outro caractere para atrapalhar.

O detalhe é que como o campo deixa de ser vazio por padrão, temos que acrescentar a verificação, já dentro da função, para que o valor filtrado seja o valor padrão também, que foi o que fiz em verde, ou seja, se o usuário simplesmente abrir o formulário e clicar em Enviar, será enviada a string “Por favor, digite seu nome aqui”, mas evidentemente não queremos que isso seja considerado um valor válido, por isso essa verificação em verde se fez necessária.

Executando o código teremos:

Validações em Javascript

Reparem que o texto já aparece automaticamente no campo. Mas, quando eu clico nele, ou seja, quando direciono o foco para ele, a função onfocus() é acionada e o texto desaparece automaticamente, conforme imagem a seguir:

Validações em Javascript

Vamos melhorar um pouco mais o código.

Função onblur()

O evento onblur é o oposto do onfocus. Este último é acionado sempre que o foco é colocado em determinado objeto, enquanto o onblur é acionado quando o foco é retirado dele. Vou dar um exemplo prático com o seguinte código:

Validações em JavaScript

Percebam que adicionei, também para o campo Nome do nosso pequeno formulário, o evento onblur, que verifica se o valor digitado é vazio, ou seja, se o usuário está tentando deixar esse campo em branco e clicar em outro local da página e, se isso realmente acontecer, ele insere o valor “Esse campo não pode ficar em branco” nele.

Vou tentar deixar o campo em branco e clicar fora do formulário. Vejam o que acontece:

Validações em JavaScript

O Script inseriu o texto alertando ao usuário de que o campo deve ser preenchido.

Muito bem, agora vamos efetuar uma validação um pouco mais complexa. Vou adicionar um campo CEP no nosso formulário.

Validações em JavaScript

Vamos começar validando a quantidade de caracteres digitados pelo usuário, já que sabemos que um CEP válido é composto por 8 números. Faremos isso através do método length. Nosso JavaScript ficará da seguinte forma:

Validações em JavaScript

Se digitarmos um CEP incompleto nossa função verificará e retornará o erro:

Validações em JavaScript

Mas ainda temos um problema grave. A função length está apenas contando caracteres, ou seja, se digitarmos um CEP válido, por exemplo 13574971, ela vai aceitar, mas apenas por ele ter 8 caracteres. Isso quer dizer que se digitarmos um CEP inválido, mas também com 8 dígitos, ele será aceito. Seria algo como 13574TGD. Temos que evitar isso, e está fácil fazê-lo, vejam:

Validações em JavaScript

A função isNaN, que já foi explicada, faz a verificação e nos diz se o que foi digitado no campo é um valor numérico ou não. O detalhe fica por conta do OU lógico, também grifado em vermelho, ou seja, devemos retornar a mensagem de erro caso o campo não tenha 8 caracteres ou não seja um valor numérico, que é o que essa linha do comando else está verificando. Agora, depois disso, nossa validação acontece corretamente, vejam:

Validações em JavaScript

Poderíamos combinar os comandos if com o método length e determinarmos tamanhos mínimos ou máximos de caracteres para determinados campos, ou verificar se um dado, como a idade do usuário, é um valor positivo ou não, enfim, o que seu site necessitar pode ser validado combinando os poucos comandos que vimos e, com o auxílio do onfocus() e onblur() é possível alertar o usuário para que o preenchimento seja feito sem maiores dificuldades.



Algumas notícias

O que acontece com o cérebro no exato momento em que morremos

O que passa em nossa cabeça no momento da morte? Não se sabe exatamente e, embora os cientistas tenham alguma resposta, a resposta continua sendo um grande mistério. Além de difícil solução, tentar respondê-la pode criar implicações éticas. No entanto, uma equipe de cientistas da Universidade...

Ler Notícia Completa

Operada e devolvida ao útero, menina que nasceu duas vezes hoje 'acorda sorrindo toda manhã'

Um bebê pode nascer duas vezes? Não é o caso da absoluta maioria das crianças, mas foi assim para a pequena Lynlee Boemer. Em outubro de 2015, sua mãe, Margaret Boemer, descobriu que estava grávida de gêmeos. Ela sofreu um aborto espontâneo, mas um dos bebês sobreviveu. Com dez semanas de ges...

Ler Notícia Completa

Médicos dizem estar perto de chegar a exame de sangue para todos os tipos de câncer

Cientistas dizem que estão mais perto de criar um exame de sangue universal, capaz de identificar todos os tipos de câncer. Estudo conduzido com 1.005 pacientes por uma equipe da Universidade Johns Hopkins, dos Estados Unidos, testou um método que detecta oito tipos de proteínas e 16 mutações ge...

Ler Notícia Completa

Formato JPEG está com os dias contados

Há quantos anos você ouve falar em arquivos JPG? O formato já era utilizado nos primórdios da web comercial nos anos 1990, vivendo há mais de 20 anos como o principal método de compressão de imagens do público. No que depender de Google, Mozilla e outras empresas, isso pode mudar dentro de algum...

Ler Notícia Completa

EUA aprovam 'droga viva', 1ª terapia contra câncer que reestrutura sistema imunológico do paciente

Os Estados Unidos aprovaram o primeiro tratamento que reestrutura o sistema imunológico do paciente para atacar o câncer. A agência reguladora de medicamentos do país - a FDA - diz que a decisão foi um momento "histórico" e que a medicina agora "entra em uma nova fronteira". A companhia Novar...

Ler Notícia Completa

Cientistas norte-americanos criaram anticorpo capaz de atacar 99% das variações de HIV

Um grupo formado por pesquisadores do Instituto Nacional de Saúde (NIH), dos Estados Unidos, e da empresa farmacêutica Sanofi criaram em laboratório anticorpos superdesenvolvidos capazes de atacar 99% das cepas de HIV. O feito é ainda mais significativo por ser capaz até mesmo de prevenir a infec...

Ler Notícia Completa

Facebook investirá mais de US$ 1 bilhão em conteúdo original em 2018

Anunciada em agosto, a plataforma original de vídeos do Facebook, Watch, parece ser a grande aposta de Mark Zuckerberg para o ano que vem. De acordo com o TechCrunch, a empresa deve investir US$ 1 bilhão para criar e incentivar iniciativas voltadas para a produção de conteúdo audiovisual exclu...

Ler Notícia Completa

Software da Adobe é capaz de manipular gravações de voz e criar frases com perfeição

O software se chama Voco, foi desenvolvido pela Adobe (a mesma criadora do Photoshop) e permite manipular gravações de voz com uma precisão inédita, inclusive criando frases que a pessoa não disse. Na demonstração do app, um técnico forjou uma gravação em que um homem dizia “eu beijei a Jordan...

Ler Notícia Completa

Você sabia?

O filme Mortal Kombat, inspirado no jogo de mesmo nome, faturou 23 milhões de dólares apenas no fim de semana de estreia nos EUA. Ainda sobre este título de sucesso, outra cifra que impressiona é o faturamento ao longo do primeiro ano: 1 bilhão de dólares no mundo todo.

A IBM detém o recorde de patentes em um único ano, atingindo a marca de 4186 registros no ano de 2008. Clique aqui e saiba mais sobre esta gigante do mundo da tecnologia.

Utilizar seu notebook em camas, sofás ou qualquer superfície macia pode obstruir as entradas e saídas de ar, elevando a temperatura e provocando danos a diversos componentes. Utilize-o sempre sobre uma superfície rígida. Saiba mais aqui.

Você gostará destes vídeos: