Loading
carregando...

Validação de formulário com Javascript


Nesse post vamos aprender como validar um formulário em HTML com javascript.

Primeiramente vamos criar uma função em javascript que será responsável por verificar se os campos foram preenchidos corretamente, aqui iremos simular um formulário de contato.

Caso um dos campos não tenha sido preenchido, a função retornará para o usuário um alert informando a necessidade de preencher o campo correspondente, e na mesma verificação é necessário informar ao HTML que não é para enviar o formulário se aquele campo não for preenchido, para isso usamos a função do javascript return false, que não deixará o html enviar o formulário.

se todos os campos forem preenchidos corretamente informamos ao HTML que poderá enviar o formulário usando a função do javascript return true, que será colocado no final da função que irá verificar nosso formulário.

Vamos então a função que irá verificar nosso formulário:

  1.  
  2. <script type="text/javascript">
  3. function validaForm(){
  4. 	if(document.form.nome.value==""){
  5. 		alert("Prencha o campo nome!");
  6. 		document.form.nome.focus();
  7. 		return false;
  8. 	}
  9. 	if(document.form.fone.value==""){
  10. 		alert("Informe seu telefone Telefone!");
  11. 		document.form.fone.focus();
  12. 		return false;
  13. 	}
  14. 	if(document.form.email.value==""){
  15. 		alert("Por favor, informe seu email!");
  16. 		document.form.email.focus();
  17. 		return false;
  18. 	}
  19. 	if(document.form.email.value=="" || document.form.email.value.indexOf("@")==-1 || document.form.email.value.indexOf(".")==-1){
  20. 		alert("Email inválido, digite um email válido!");
  21. 		document.form.email.focus();
  22. 		return false;
  23. 	}
  24. 	if(document.form.assunto.value==""){
  25. 		alert("Informe o assunto referente ao motivo do contato!");
  26. 		document.form.assunto.focus();
  27. 		return false;
  28. 	}
  29. 	if(document.form.mensagem.value==""){
  30. 		alert("Preencha o campo mensagem!");
  31. 		document.form.mensagem.focus();
  32. 		return false;
  33. 	}
  34. 	return true;
  35. }
  36. </script>
  37.  



Com nossa função javascript formatada vamos então construir nosso formulário em HTML que irá receber os dados do usuário.
Para que nosso formulário entenda que precisamos chamar uma função javascript antes de enviar os dados usamos a função onsubmit do HTML para executar a verificação antes de ser enviado os dados.

No formulário então ficaria assim:

  1.  
  2. <form action="" method="post" name="form" onSubmit="return validaForm();" >
    
  3.  
  4.     <span>Nome</span><br />
    
  5.     <input type="text" name="nome" /><br>
    
  6.  
  7.     <span>Telefone</span><br />
    
  8.     <input type="text" name="fone1" /><br>
    
  9.  
  10.     <span>Email</span><br />
    
  11.     <input type="text" name="email1" /><br>
    
  12.  
  13.     <span>Assunto</span><br />
    
  14.     <input type="text" name="assunto1" /><br>
    
  15.  
  16.     <span>Mensagem</span><br />
    
  17.     <textarea name="mensagem" ></textarea><br>
    
  18.  
  19.     <input type="submit" value="Enviar" />
    
  20.  
  21. </form>
    
  22.  



Bom gente é isso... não é muito difícil de fazer, e pra quem já tem um puco de conhecimento em html e javascript é bem simples.

Abrass t a próxima...


Autor: Dárcio Gomes
Data: 12/08/2012 00:00:00