CriarWeb.com > Manuais > Formulários e Javascript

Vamos realizar um exemplo de um formulário completo para validar. As validações se fazem no próprio navegador antes de enviá-lo. Se houver algum campo não preenchido ou com informação errônea, o formulário mostra o campo que está incorreto e solicita ao usuário que o mude. Se todos os dados do formulário estiverem corretos se envia o formulário.

Quisemos fazer um formulário simples, para que o exercício não se tornasse complicado demais. Não obstante, se realizam validações em campos com distintos valores, para torná-lo mais variado. Comprova-se um campo onde deve figurar um texto, outro onde deve se introduzir um número maior que 18 e um último com um campo select onde devem ter selecionado um valor.

Referência: para compreender este exercício faz falta conhecer o trabalho com formulários com Javascript. Podemos aprender também Javascript desde zero http://www.desarrolloweb.com/javascript/, caso seja necessário.

Pode-se ver o exemplo em funcionamento para se ter uma idéia mais exata do objetivo buscado.

O código do formulário

O formulário com o qual vamos trabalhar é o seguinte:

<form name="fvalida">
<table>
<tr>
    <td>Nome: </td>
    <td><input type="text" name="nome" size="30" maxlength="100"></td>
</tr>
<tr>
    <td>Idade: </td>
    <td><input type="text" name="idade" size="3" maxlength="2"></td>
</tr>
<tr>
    <td>Interesse:</td>
    <td>
    <select name=interesse>
    <option value="Escolher">Escolher
    <option value="Comercial">Contato comercial
    <option value="Clientes">Atenção ao cliente
    <option value="Provedores">Contacto de provedores
    </select>
    </td>
</tr>
<tr>
    <td colspan="2" align="center"><input type="button" value="Enviar" onclick="valida_envia()"></td>
</tr>
</table>
</form>

É um formulário qualquer. Os únicos pontos onde devemos prestar atenção são:

• O nome do formulário, "fvalida", que utilizaremos para nos referir a ele mediante Javascript.
• O botão de enviar, que ao invés de ser um submit corrente, é um botão que chama a uma função, que se encarrega de validar o formulário e enviá-lo se tudo estiver correto.

Função Javascript para validar o formulário

Agora veremos a função que criamos para validar o formulário. Chama-se valida_envia(). Simplesmente, para cada campo do formulário, comprova que o valor introduzido é correto. Se não for correto, mostra uma mensagem de alerta, coloca o foco da aplicação no campo que deu o erro e abandona a função retornando o valor 0.

Se todos os campos forem corretos, a função continua até o final, sem sair, por não estar nenhum campo incorreto. Então, executa a última instrução, que é o envio do formulário.

Vejamos a função inteira, embora logo a expliquemos por partes.

function valida_envia(){
    //valido o nome
    if (document.fvalida.nome.value.length==0){
       alert("Tem que escrever seu nome")
       document.fvalida.nome.focus()
       return 0;
    }

    //valido a idade. Tem que ser inteiro maior que 18
    edad = document.fvalida.idade.value
    edad = validarInteiro(idade)
    document.fvalida.idade.value=idade
    if (idade==""){
       alert("Tem que introduzir um número inteiro em sua idade.")
       document.fvalida.idade.focus()
       return 0;
    }else{
       if (idade<18){
          alert("Deve ser maior de 18 anos.")
          document.fvalida.idade.focus()
          return 0;
       }
    }

    //valido o interesse
    if (document.fvalida.interesse.selectedIndex==0){
       alert("Deve selecionar um motivo de seu contato.")
       document.fvalida.interesse.focus()
       return 0;
    }

    //o formulário se envia
    alert("Muito obrigado por enviar o formulário");
    document.fvalida.submit();
}

No primeiro bloco se valida o campo nome. A validação que se faz é simplesmente se tiver sido escrito algo no campo. Para isso, comprova se o número de caracteres escritos no campo nome é zero. Nesse caso, mostra a mensagem de alerta, situa o foco no campo de texto e sai da função devolvendo o valor 0.

Nota: o foco da aplicação é o lugar onde está situado o cursor. O foco pode estar em qualquer lugar. Por exemplo, em um campo de texto, em um select, em um link ou na própria página. Si pressionarmos uma tecla do teclado afeta ao lugar onde está situado o foco. Se, por exemplo, o foco está em um campo de texto, ao operar com o teclado estaremos escrevendo nesse campo de texto.

A validação da idade maior que 18 anos tem duas partes. Primeiro, devemos comprovar que no campo de texto há escrito um valor inteiro. Logo, se tivermos um inteiro, teríamos que comprovar que é maior que 18. Para fazer esta validação nos apoiaremos em uma função que já vimos em outro artigo de CriarWeb.com, que fala sobre como validar um inteiro em um campo de formulário. Essa função devolve um string vazio no caso de não ser um inteiro e o próprio inteiro, se é que o era.

Antes de realizar a validação da idade propriamente dita, se obtém o valor introduzido no campo de formulário idade e se salva em uma variável chamada idade. Logo, se executa a função passando esta idade. Seu resultado é utilizado para colocá-lo outra vez ao campo de texto. Então, se comprova se o valor devolvido pela função é um string vazio. Nesse caso, é que o valor escrito no formulário não era um inteiro, por isso se mostra a mensagem de erro, se situa o foco e se sai da função.

No caso em que o campo idade contivesse um inteiro, se deve comprovar a seguir se é maior que 18. No caso de ser menor, se mostra o erro e se sai. Caso contrário, -então o valor seria maior ou igual que 18-, se continua com as comprovações.

Por último se valida o campo select, onde aparece o interesse do suposto visitante, que lhe motiva para enviar o formulário. Nesse campo deve-se ter selecionado qualquer opção menos a primeira. Para assegurarmos, simplesmente se comprova se o atributo selectedIndex do campo select tem o valor 0. Esse atributo armazena o índice selecionado no menu select. O primeiro campo tem o índice 0, o segundo o índice 1...

Se se comprova que selectedIndex vale 0, se mostra uma mensagem de alerta, se coloca o foco no campo do formulário e se sai da função.

Se chegamos até este ponto sem sairmos da função é que todos os campos do formulário estavam preenchidos corretamente. Nesse caso se deve enviar o formulário. Antes de enviar o formulário se mostra uma mensagem de alerta, agradecendo que se tenha preenchido corretamente. Esta mensagem pode ser suprimida se se desejar.

Para enviar o formulário se faz uma chamada ao método submit() de tal formulário.

Conclusão

Este exercício é do mais básico e útil que se pode fazer em Javascript. Requer certos conhecimentos, já ligeiramente avançados, porém no fundo não é complicado. Inclusive ampliá-lo é bastante simples, sempre que sigamos um esquema similar para cada um dos campos.

Podemos ver o resultado obtido em uma página à parte.