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

Xiaomi vende 52,9 milhões de celulares no segundo trimestre de 2021 e faturamento dispara

A gigante chinesa Xiaomi registrou um aumento de quase 85% no seu faturamento no segundo trimestre de 2021 em comparação ao mesmo período do ano passado. A receita divulgada pela empresa foi de 13,5 bilhões de dólares (algo em torno de 70 bilhões de reais) nos meses de abril a junho deste ano...

Ler Notícia Completa

Galaxy S9 e Galaxy S9 Plus receberão atualização de segurança este mês

A Samsung começou a liberar esta semana, para proprietários dos modelos Galaxy S9 e Galaxy S9 Plus, uma nova atualização de segurança. Por enquanto somente alguns países da Europa receberam o pacote, que deve ser dis...

Ler Notícia Completa

Novas câmeras 'debaixo da tela' da Oppo surpreendem

Para muitos, colocar uma câmera embaixo da tela de um celular era uma tarefa impensável, por conta de diversos problemas técnicos. Os primeiros testes da Oppo que se propuseram a isso geravam imagens de qualidade bastante insatisfatória, já que a captação da luz era prejudicada pela tela. A prim...

Ler Notícia Completa

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

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.

O primeiro jogo a fazer uso de uma Inteligência Artificial foi o Mouse in the Maze, criado em 1955, na União Soviética. Você pode saber mais sobre ele clicando aqui.

Até a primeira metade dos anos 90 era bastante comum que as trilhas sonoras dos games fossem criadas por mulheres e a responsável pelas músicas do clássico Street Fighter 2 foi Yoko Shimomura. Segundo ela, o ritmo "Tararirarin" da música tema do personagem Blanka, do Brasil, veio à sua cabeça enquanto ela estava no trem a caminho da Capcom.

Ajude o Contém Bits com um cafezinho!

Se você gostou do artigo, se ele lhe foi útil de alguma maneira e você quiser ajudar o Contém Bits, saiba que é simples, fácil e rápido. Basta clicar na imagem do PayPal (ou no cafezinho) e seguir as instruções, em ambiente seguro e com o respaldo do Paypal. Eu agradeço muito! :)


Você gostará destes vídeos!