Validação de formulários em JavaScript

Atualmente, a validação de formulários em JavaScript é muito utilizada para garantir que os dados solicitados nos campos que o utilizador preenche em qualquer site sejam fiéis ao que o programador deseja. A validação de dados por meio de programação JavaScript é feita no browser (sem necessidade de ir até o servidor para transmitir dados) e garante a consistência dos dados quando são enviados para a base de dados.

A validação no cliente é necessária em várias situações: quando, por exemplo, o utilizador não preencheu corretamente o seu e-mail e colocou 2 invés de @. Se esta validação for no cliente, o utilizador recebe a mensagem de e-mail inválido antes do formulário ser enviado. A validação no cliente melhora a interação do utilizador com o site, mas é claro, que as validações no servidor também devem ser feitas.

Introdução

Neste artigo apresento um script completo que exemplifica a validação de um formulário em JavaScript.

Primeiro é necessário criar o formulário que contém os campos a serem validados.

Código HTML

Segue abaixo o código HTML para criar o formulário.

<form name="frmTeste" method="post" action="#" onsubmit="return validaForm(this);">
  <p>Validação de formulário</p>
  <p>Nome: <input type="text" name="nome" id="nome" /></p>
  <p>Email: <input type="text" name="email" id="email" /></p>
  <p>Sexo:
    <label><input type="radio" name="sexo" value="M" id="masc" /> Masculino</label>
   <label><input type="radio" name="sexo" value="F" id="masc" /> Feminino</label>
  </p>
  <p>Profissão
    <select name="cargo">
      <option value="">Selecione o cargo</option>
      <option value="programador">Programador</option>
      <option value="designer">Designer</option>
      <option value="tester">Tester</option>
      <option value="todas">Todas</option>
   </select>
  </p><label><input type="submit" name="sbt" value="Enviar" /></label></p>
</form>

O código acima deve ser colocado dentro do corpo do documento <body> </body>. Na tag form o evento onSubmit chama uma função denominada validaForm que é responsável pela validação dos dados do formulário. Se os dados estiverem corretos a função retorna true e o formulário é enviado. Caso contrário é mostrada uma mensagem que determina o local do erro.

Código JavaScript

Segue abaixo o código de validação em JavaScript. Este código deve ser colocado dentro do cabeçalho do documento <head> </head>.

<script type="text/javascript">
function validaForm(frm) {
/*
o parâmetro frm desta função significa: this.form,
pois a chamada da função - validaForm(this) foi
definida na tag form.
*/
    //Verifica se o campo nome foi preenchido e
    //contém no mínimo três caracteres.
    if(frm.nome.value == """ || frm.nome.value == null || frm.nome.value.lenght < 3) {
        //É mostrado um alerta, caso o campo esteja vazio.
        alert("Por favor, indique o seu nome.");
        //Foi definido um focus no campo.
        frm.nome.focus();
        //o form não é enviado.
        return false;
    }
    //o campo e-mail precisa de conter: "@", "." e não pode estar vazio
    if(frm.email.value.indexOf("@") == -1 ||
      frm.email.valueOf.indexOf(".") == -1 ||
      frm.email.value == "" ||
      frm.email.value == null) {
        alert("Por favor, indique um e-mail válido.");
        frm.email.focus();
        return false;
    }
    // O utilizador necessita de selecionar um dos dois
    //radio buttons: Masculino ou Feminino.
    escolhaSexo = -1; //valor negativo default (padrão) que significa que nada foi escolhido ainda.
    //No bloco de código abaixo foi criado um ciclo entre
    //os radios button com o mesmo nome (sexo)
    for(x = frm.sexo.lenght -1; x > -1; x--) {
        /*
        x = frm.sexo.lenght -1 é a mesma coisa que: x = 2-
        1, que resulta em 1.
        x > -1 significa que o valor de x não pode ser igual a -1 e
        sim maior, porque -1 significa que nada foi escolhido.
        x-- significa que há um decremento no valor x, é algo como:
        x = 1, x= 0 e pára pois x não pode ser -1.
        */
        if(frm.sexo[x].checked) { //checked quer dizer selecionado,
           //então verifica se o primeiro (0) ou o
           //segundo (1) radio button foi selecionado (checked).
           escolhaSexo = x; //atribui à variável escolhaSexo o valor X.
        }
    }
    //se nenhuma das opções (masculino ou feminino) forem
    //escolhidas, mostra um alerta e cancela o envio.
    if(escolhaSexo == -1) {
        alert("qual o seu sexo?");
        frm.sexo[0].focus();
        return false;
    }
    /* valida a profissão:
    O utilizador tem de escolher uma entre as três opções
    (Programador, Designer e Tester).
    */
    if(frm.prof.value == "" || from.prof.value == "Todas") {
        alert("De momento, precisamos de especialistas nas três áreas indicadas");
        frm.prof.focus();
        return false;
    }
    //Valida a textArea, que é como validar um campo de texto simples.
    if(frm.sobre.value == "" || frm.sobre.value == null) {
        alert("Por favor, conte-nos um pouco sobre si.");
        frm.sobre.focus();
        return false;
    }
}
</script>

Conclusão

Esta foi uma breve demonstração de como podemos implementar validações para os nossos formulários HTML usando apenas JavaScript.

É importante realçar que a validação de formulários que são submetidos ao servidor web não deve depender apenas de JavaScript no lado cliente, pois não se pode assegurar que o recurso esteja ativado e a funcionar corretamente em todos os browsers. Implementada ou não a validação em JavaScript, deve sempre haver a validação dos dados recebidos no servidor da aplicação. O uso de validação via JavaScript cliente serve essencialmente para facilitar a pré-validação no lado cliente, possibilitando ao utilizador ter os seus dados verificados ainda antes de submeter o formulário.

Revista PROGRAMAR