Minicursos - Javascript

Validações - Parte 1


Validar um campo significa verificar se o formato da informação contida nele está coerente com o que o restante do código está esperando. Ela é importante para impedir que determinado bloco de código receba um dado em formato incorreto. Se uma função aguarda um número para realizar uma operação matemática, mas recebe uma letra, teremos uma falha grave, pois a execução não poderá prosseguir.

Nós fizemos alguns exemplos nos tópicos anteriores sobre JavaScript onde dois valores digitados pelo usuário são multiplicados, então o script exibia o resultado. Tudo funcionou perfeitamente, mas só porque fizemos bom uso da página e inserimos os dados corretamente, mas e se no lugar de um número tivéssemos inserido uma letra, o que aconteceria? Vamos testar!

Validação JavaScript

Oooops! Tentei multiplicar o número 4 pela letra R e vejam o que foi retornado no campo resultado. Apareceu a sigla NaN, que significa Not a Number, ou seja, o código identificou que o valor não é um número.

É para evitar esse tipo de problema que as validações existem. Nesse caso devemos, antes de efetuar a multiplicação, verificar se os dados, tanto do campo 1 quanto do campo 2, são realmente números.

Para isso vamos usar os comandos de decisão if/else, e também uma função do próprio JavaScript, chamada isNaN.

Conhecendo o isNaN

Essa função verifica se um determinado dado é um número. Esse dado pode ser o campo de um formulário ou uma variável. O cuidado que se deve tomar com ela é que o retorno é sempre um valor booleano, ou seja, true ou false, mas ela irá retornar true quando o dado NÃO for um número e false quando for um número. Temos uma tendência em achar que o true será retornado quando for um número, mas basta lembrar que a sigla NaN significa Not a Number. Vamos a um exemplo para deixar bem claro.

var y = 5;
var x = “Contém Bits”;
var w = “8”;

isNaN(y); = retornará false, pois 5 é um número.

isNaN(x); = retornará true, pois o conteúdo de x não é um número e sim uma string.

ixNaN(w); = retornará true, pois embora o que esteja armazenado na variável w seja um número, trata-se de uma string e não um valor numérico.

É importante que fique claro que essa função procura por números, ou seja, dados que possam sofrer operações aritméticas. Strings e outros valores booleanos retornarão sempre true.

Bem, agora que você já sabe usar o if/else e o isNaN, fica fácil consertar o problema exibido no início do tutorial. Vejam como ficaria uma das formas de evitar aquele erro do campo em branco sendo tratado como zero:

Validação - JavaScript

Vou provocar um erro no navegador, vejam:

Validação JavaScript

Vejam que inseri um dado não numérico no campo 2 e nossa validação funcionou perfeitamente! No entanto, o nosso minúsculo código ainda não está perfeito e vou lhes explicar o motivo. Aliás, vou demonstrar, vejam:

Validação JavaScript

Eu não inseri nada no campo 2, mas mesmo assim nosso código não deu qualquer alerta. Isso aconteceu porque a função isNaN tratou nosso campo vazio como se valesse zero. Vamos melhorar o código, para que campos vazios também tenham a mensagem de alerta exibida. Para isso aumentaremos a validação para incluir campos de string vazios, que são representados por um par de aspas, sem nada entre elas, dessa forma: “ ”

Então nosso código JavaScript ficará dessa maneira:

Validação - JavaScript

Vamos testar:

Validação JavaScript

Percebam que com o campo em branco, agora ele exibe a mensagem de alerta e não processa o cálculo, ou seja, nosso minúsculo script está funcionando corretamente!



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
Você gostará destes vídeos: