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

As memórias DDR5 estão chegando e trarão muitas melhorias

A próxima geração de memórias RAM já possui especificações definidas e promete grande melhoria em relação às atuais DDR4. E o mais importante: mesmo com desempenho bastante superior, elas consumirão menos energia. A tensão de trabalho das memórias DDR5 será de apenas 1.1V contra os 1.2V das atu...

Ler Notícia Completa

Google Chrome consumirá menos memória RAM em breve

O navegador da gigante de buscas da Internet é, sem dúvida, um dos melhores disponíveis, mas é inegável que o consumo de memória RAM por parte dele é exagerado. Este problema já se estende por anos, mas parece que em breve ele terá uma solução. Um novo recurso do Windows 10, chamado SegmentHeap...

Ler Notícia Completa

Sites e vídeos sem propagandas? Sim, é possível através da exploração de uma falha!

Seguramente você já se deparou com sites que bloqueiam o conteúdo da página e te obrigam a assinar determinado serviço para ler o conteúdo, certo? Ou foi tentar assistir aquele vídeo e as propagandas em tela cheia não pararam de surgir. Bem, todos já nos deparamos com isso, no entanto, um bug de...

Ler Notícia Completa

Inteligência Artificial cria antibiótico super potente

Pesquisadores do MIT (EUA) identificaram um novo e poderoso composto antibiótico usando um algoritmo de aprendizado de máquina, uma técnica de inteligência artificial. Em testes de laboratório, a droga matou algumas das bactérias causadoras de doenças mais problemáticas do mundo, incluindo algu...

Ler Notícia Completa

Google lança programa para capacitar profissionais brasileiros e com direito a bolsas

O Google iniciou nesta terça-feira (17) o Certificado Profissional de Suporte em TI para brasileiros. Trata-se de um curso desenvolvido pela gigante de tecnologia em parceria com a Coursera. Inicialmente, o módulo de ensino foi anunciado a um valor de US$ 39 por mês. Entretanto, sofreu uma redu...

Ler Notícia Completa

Você sabia?

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.

Street Fighter 2, lançado para o Super Nintendo no início dos anos 90, foi o principal responsável pelo aumento nas vendas deste console. Graças ao sucesso do título nos Arcades e à perfeita adaptação ao console, muitos consumidores adquiriram o SNES para jogarem o título em casa. Saiba mais.

A Máquina de Pascal, criada em 1642 pelo filósofo, físico e matemático francês Blaise Pascal, é reconhecida como o primeiro computador do mundo e ele foi criado com o objetivo de calcular impostos. Saiba mais.

Você gostará destes vídeos!