Validando formulários com Javascript

Hoje vamos usar os nossos conhecimentos de HTML e Javascript para criar formulários e como validá-los, continuando nossa série de primeiros passos  na programação.

Porque validar formulários

Um formulário é a forma clássica na internet de permitir que um usuário entre com dados e interaja com a página. Assim como você pode preencher uma ficha de papel para participar de um curso, a mesma ficha pode ser apresentada numa página web como vimos nesse post.

Quando você está preenchendo uma ficha de papel e erra, você pode pedir outra ficha ou apagar, mas a questão é que humanos erram e quando criamos nossos programas precisamos sempre imaginar o que vamos fazer caso um usuário digite uma string sem “@” num campo de e-mail por exemplo.

Com o passar dos anos o próprio html criou novas propriedades em inputs para o navegador já bloqueasse entradas erradas do usuário como você pode ver no código abaixo, porém muitas coisas ainda precisam ser escritas para evitar erros.

<!DOCTYPE html>
<html>
<head>
   <script type="text/javascript"> 
   <script/>
</head>
<body>
   <form>
     <input placeholder="Nome" type="text" id="nome" />
     <input placeholder="email" type="email" id="email" />
     <input placeholder="senha" type="password" id="password" />
     <button>Cadastrar</button>
   </form>
</body>
</html>

Sempre se pergunte quando

No nosso último texto falamos um pouco da importância da programação com eventos, escrevendo códigos que só rodem em determinados momentos.

No nosso exemplo do formulário nós precisamos escolher um momento (evento) para checar se ele está preenchido corretamente e vamos fazer isso quando o usuário clicar no botão.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    window.onload = function () {
        var botao = document.getElementById("botao");
        botao.onclick = function () {
        };
    };
</script>
</head>
<body>
    <form>
         <inputplaceholder="Nome"type="text"id="nome" />
         <inputplaceholder="email"type="email"id="email" />
         <inputplaceholder="senha"type="password"id="password" />
         <button id="botao">Cadastrar</button>
    </form>
</body>
</html>

Condicionais

Quando fazemos nossos primeiros fluxogramas, vimos que programar é pensar em caminhos diferentes, assim como na figura ao lado, onde existe um caminho para quem entendeu o post e outro pra quem não entendeu.

Para representar esses fluxos em Javascript, usamos as instruções “if” e “else” como no código abaixo.


if (/* entendeu o post? */) {
// Caminho feliz, onde o resultado da expressão é true.

} else {

// caminho triste, onde o resultado da expressão é false.

}

Pensando na nossa validação de formulário, quando um usuário clica num botão, o caminho feliz é aquele onde o formulário está preenchido corretamente e outro onde ele não está.

 

Utilizando o if

Vamos definir o que é um formulário bem definido com as seguintes regras:

  1. O Campo senha precisa ter pelo menos 6 caracteres
  2. O Campo e-mail precisa ter um carater @

Vamos nos focar primeiro na primeira regra, se você procurar no google “tamanho string mdn” provavelmente vai encontrar como descobrir essa informação usando o .length. No código abaixo escrevemos como fazer a condição 1 no Javascript.


var input = document.getElementById("password");
if (input.value.length &amp;gt;= 6) {
    alert("A senha possui " +input.value.length); 
} 

Repare que dentro dos parânteses do if tínhamos definido que poderíamos colocar qualquer expressão, da mesma forma que aprendemos nesse post. Logo colocamos uma comparação se o tamanho do valor escrito no campo senha é maior ou igual a 6 caracteres. Caso a expressão seja True, um alerta aparecerá na tela.

Note que o não usamos o else pois ele é opcional, e funciona para fazermos alguma ação quando a expressão for falsa. Veja abaixo como ficaria um código com if e else.

 
var input = document.getElementById("password"); 
if (input.value.length >= 6) {
 alert("A senha possui " +input.value.length); 
} else {
 alert("É preciso digitar uma senha com pelo menos 6 caracteres"); 
}

Sua vez

Ainda falta testar a validação número 2, onde o campo e-mail precisa conter um ‘@’, mas isso deixaremos pra você praticar. Lembre-se que podemos colocar qualquer expressão no if e use esse link para entender como descobrir o arroba.

Mas de qualquer maneira caso queira conferir o código acesse esse link e nos vemos no próximo texto. Caso esteja acompanhando essa série deixa nos comentários alguma sugestão.