Validação de Campos com JavaScript

Bom, muitas pessoas tem problemas quando estão programando em ASP e precisam que o usuário completem todos os campos do formulário, isso pelo menos aconteceu comigo no começo, hoje vejo que com JavaScript podemos fazer muitas coisas que com somente o ASP seria difícil.

Segue dois exemplos para obrigarem os usuários a preencherem os campos necessários sem precisar atualizar a página e fazer a verificação na próxima tela:

Primeiro exemplo envia uma mensagem para mostrando os campos vazios:

1. Crie uma página para testes, nesse caso “teste.asp”, depois crie um formulário, esse aqui é de exemplo.
   <form action=”teste.asp” method=”post” id=”form” name=”form”>
   <input type=”text” name=”nome” />
   <input type=”text” name=”senha” />
   <input type=”button” name=”botao” value=”Enviar” OnClick=”valida();”>
   </form>
2. Nesse caso não coloque um botão Submit, apenas Button, em OnClick, mande para a função “valida();”.
3. Crie a função “valida()”, lembre-se que a função deve sempre estar acima da chamada.
4. Segue a função:
   <script>
   function valida(){
   var msg=’Os seguintes campos estão vazios: ‘;
   if (document.form.nome.value==”){
   msg=(msg+’\nNome’)
   }
   if (document.form.senha.value==”){
   msg=(msg+’\nSenha’)
   }
   if (msg!=’Os seguintes campos estão vazios: ‘){
   alert(msg);
   }else{document.form.submit();}
   }
   </script>
5. Salve a página e rode para testar.

Segundo exemplo, que não garanto o funcionamento além do Internet Explorer, porém acho melhor, pois não irrita o usuário com esses alertas, minha dica é utilizar os alertas o mínimo possível.

1. Crie uma página para testes, nesse caso “teste.asp”, depois crie um formulário, esse aqui é de exemplo.
   <form action=”teste.asp” method=”post” id=”form” name=”form”>
   <input type=”text” name=”nome” onKeyUp=”valida();” />
   <input type=”text” name=”senha” onKeyUp=”valida();” />
   <input type=”submit” name=”botao” disabled=”disabled” value=”Enviar”>
   </form>
2. Nesse caso, pode deixar o botão como “Submit”, porém desabilitado.
3. A diferença é que quem chama a função é quando a tecla é solta nos campos.
4. A função desabilita o botão de nome “botao” dentro do formulário, apenas será habilitado quando os dois campos estiverem preenchidos.
5. Segue a função:
   <script>
   function valida(){
   if (document.form.nome.value==”||document.form.senha.value==”){
   document.form.botao.disabled=true;
   }else{document.form.botao.disabled=false;}
   }
   </script>
6. Sempre que a tecla for solta irá chamar a função efetuando a verificação e se for verdadeira, libera o botão para continuar.

É isso ai, vocês podem adaptar para quantos campos quiserem da forma que acharem melhor, com a mensagem que preferirem.

Um abraço a todos!