Validando Formulários com Javascript

13 de janeiro de 2009

Com o PHP ou ASP, podemos validar um formulário, porém é necessário atualizar a página e tudo acaba sendo mais demorado. Com Javascript isso fica mais fácil, pois não é necessário nem atualizar a página. Mas lembrando que é necessário também a validação com o lado servidor (PHP ou ASP), pois o javascript pode ser burlado.

Clique aqui para ver o que será feito

É uma validação simples, porém de muita utilizadade. Vamos ao código (O código completo está disponível para download no final do artigo):

1. Criando o formulário:

Primeiramente, vamos fazer nosso formulário:

<html>
<head>
<title>Validando Formulários com Javascript</title>
</head>
<body>
<form name="form1" action="enviar.php" method="post">
Nome:
<input name="nome" type="text"><br /><br />
Email:
<input name="email" type="text"><br /><br />
Senha:
<input name="senha" type="password"><br /><br />
Repitir Senha:
<input name="rep_senha" type="password"><br /><br />
<input type="submit"  onclick="return validar()">
</form>
</body>
</html>

- Bom aqui criamos o formulário;

- Linha 15: [onclick="return validar()"] estamos chamando a função validar() no momento que o usuário clicar em enviar;

2. Criando a função validar()

Agora, vamos criar nosso código javascript para fazer validação, lembrando que esse código deve estar, de preferência, entre as tags head (cabeçalho):

<script language="javascript" type="text/javascript">
function validar() {
}
</script>

- No código acima foi criada a função validar();

<script language="javascript" type="text/javascript">
function validar() {
var nome = form1.nome.value;
var email = form1.email.value;
var senha = form1.senha.value;
var rep_senha = form1.rep_senha.value;
}
</script>

- Dentro de nossa função criamos as varíaveis para cada campo de nosso formulário;

- Linha 3: criamos a varíavel nome e atribuimos o valor do campo nome, ou seja form1.nome.value (Valor do campo nome do nosso formulário);

- O mesmo foi feito nas linhas 4, 5 e 6;

<script language="javascript" type="text/javascript">
function validar() {
var nome = form1.nome.value;
var email = form1.email.value;
var senha = form1.senha.value;
var rep_senha = form1.rep_senha.value;
 
if (nome == "") {
alert('Preencha o campo com seu nome');
form1.nome.focus();
return false;
}
}
</script>

- Linha 8: Se nome (O campo nome, pois declamos a variável) estiver em branco, as ações serão executadas;

- Linha 9: Dispara uma mensagem de alerta dizendo que o usuário deve preencher o campo nome;

- Linha 10: Da foco no campo nome;

- Linha 15: Retorna a resposta false, ou seja, que não deve continuar enviando os dados;

- Resumindo, caso o campo nome esteje em branco será exibido uma mensagem de alerta dizendo ao usuário que preencha o campo com seu nome;

- O mesmo pode e será feito com os outros campos;

if (nome.length < 5) {
alert('Digite seu nome completo');
form1.nome.focus();
return false;
}

- Podemos verificar também se um campo tem o número de caracteres mínimo/máximo especificado.

- Para isso utilizamos length, ou seja, se o numero de caracteres do campo nome for menor que 5 a ação será executada.

if (senha != rep_senha) {
alert('Senhas diferentes');
form1.senha.focus();
return false;
}

- Podemos também ver se dois campos coincidem, no caso a senha e sua repetição;

- Se senha (campo senha) for diferente de rep_senha (Campo Repitir Senha) as ações serão executadas;

- Podemos utilizar todos os métodos de comparação:
Menor que: <
Maior que: >
Igual a: ==
Diferente de: !=

Conclusão

Isso é só um pouco do que o javascript pode fazer, mas já é útil para validar seus formulários de uma forma mais rápida e fácil.

Download do arquivo

16 comments

Danilo 29 de julho de 2009 at 15:02

Para onde é enviado os dados da pessoa que se cadastrou?

Reply ↓
- Rafael Couto 29 de julho de 2009 at 21:38
  
  Olá Danilo.
  
  Nesse caso, para lugar nenhum, pois o arquivo “enviar.php” definido na action não existe. Meu objetivo nesse artigo foi apenas mostrar a validação do lado cliente com javascript, ok?
  
  Abraço.
  
  Reply ↓
- Junior 10 de abril de 2012 at 21:46
  
  Rafael, grato pelo conteúdo.
  As informações aqui postadas me foram bastante úteis.
  
  Reply ↓
rinaldo 25 de março de 2010 at 17:41

Este funciona!!!
Parabens.

Reply ↓
Fabrício Fernandez 6 de abril de 2010 at 17:16

Amigo está funcionando legal .. só faltou a validação do ” @ ” no campo e-mail .. mais ta valendo !!

Reply ↓
Adriano 5 de maio de 2010 at 9:34

Uma dúvida. NO caso do desenvolvimento de sistema simples para projeto de curso ou em geral, a validação dos campos é aconselhavel o javascript ou o php? Por que?

Reply ↓
- Rafael Couto 6 de maio de 2010 at 13:05
  
  Olá Adriano,
  
  Bom, a minha recomendação é que você faça sempre a validação do lado servidor, ou seja, com PHP. O javascript pode ser burlado facilmente (desativando o javascript no navegador, por exemplo). A validação javascript é só pra facilitar a vida do usuário, beleza?
  
  Abraço.
  
  Reply ↓
Ane 27 de setembro de 2010 at 11:39

Olá Rafael !

Eu entendi que esse formulário e a validação em javascript deve ser escrito tudo num mesmo documento é isso? e a função validar tem que estar completa no campo head, ou só o primeiro pedaço como mostrou acima , e completa-la em body…desculpe a ignorância ,mas estou confusa..preciso fazer um formulário semelhante em ASP ,onde o formulário depois de validado com javascript deva ser enviado pelo metodo post e exibidos em outra página. Não sei se tudo deva ser escrito num mesmo documento ou se em mais de um.Se puder me dar um toque agradeço muito
obrigada

Reply ↓
Leonaldo dantas 11 de outubro de 2010 at 17:28

Olá, gostei muito do seu blog, gostaria de saber se vc poderia me ajudar em um formulario. ficarei grato!!!!!

Reply ↓
Juninho 13 de março de 2011 at 18:50

Olá Rafael, tudo bem?
tava visitando uns blogs aqui, e vi esse script de validação, eu toh com um probleminha, será que voce pode me ajudar?
Toh criando um sistema web aki de controle de estoque, mais quando valido o campo que esta vazio, a função coloca o .focus(), porém, o prompt é posicionado no campo que mandei o focus mais ele some rapidamente, não fica nem 2 segundos com focus, qual sera o problema? será que pode me ajudar?
Me envie seu msn por e-mail.
Vlw, abraços…

Reply ↓
o_FiGuRa 25 de julho de 2011 at 14:27

até quem fim um descente que realmente funciona! geralmente eles ensinam porém mesmo assim ele cadastra sem estar validado!
este ja cancela o cadastro!

Reply ↓
Elias Andrade 26 de agosto de 2011 at 9:12

Tomei a liberdade de pegar este script pra fazer um teste em um formulário do meu site, mas não funciona. Simplesmente não retorna nada. Tem idéia do que possa ser??

Grato

Reply ↓
Thiago Bettanzos 26 de agosto de 2011 at 15:05

Bom dia Rafael,

sempre se fala que por questões de SEGURANÇA a validação sempre deve ocorrer em back-end. Mas se impedirmos a navegação dos usuários com JavaScript desabilitado? O problema não estaria 100% resolvido?

Reply ↓
- Rafael Couto 6 de setembro de 2011 at 15:22
  
  Olá Tiago,
  
  Particulamente, eu nunca confio no lado cliente, pois o código está totalmente exposto. Mas respondendo sua pergunta, digo que não, um exemplo simples: eu poderia montar um formulário no meu computador e apontar para o action do seu formulário e então eu poderia enviar os dados pelo formulário que eu fiz, burlando sua validação.
  
  Enfim, se você quer uma validação segura, não hesite em fazer no back-end.
  Abraço.
  
  Reply ↓
  - Thiago Bettanzos 8 de setembro de 2011 at 23:24
    
    E não existe forma de proteger o arquivo .php do action através do .htaccess? Sei que através dele é possível proteger, por exemplo, arquivos de imagem em geral (jpg, png, gif….), css, js. Para impedir que os mesmo sejam referenciados em outros sites. Mas no caso do .php não sei se isso é possível.
    
    Em pequenas aplicações isso é besteira, mas em grandes projetos isso reduziria muito os custos com hospedagem.
    
    Reply ↓

E awe, tranquilo, bom 1° muito legal este teu exemplo, parabéns

então, to com um problema aqui, sou “novato” em javascript, trabalho com PHP mas javascript não é meu forte, a empresa pediu para que eu validase 3 campos do form antes de enviar o contato, se acaso o usuario clicar no botão de enviar sem preencher nem um dos capos ira aparecer uma mensagem de erro em cada campo que é obrigatório, atualmente esta aparecendo a mensagem apenas no campo e-mail, se preencher o e-mail e os outros não, aparece no campo nome, se preencher o email e nome e outros não, aparece no campo estado, se preencher todos ele envia tranquilo, então seria basicamente isso, clicar no btn enviar e aparecer a mensagem nos campos de preenchimento obrigatório caso eles estejam vazio, vou por aqui o js para vc ver

//CONTATO
        // Quando o formulário for enviado, essa função é chamada
        $("#btnEnviarCo").submit(function() {
                // Colocamos os valores de cada campo em uma váriavel para facilitar a manipulação
                var nome = $("#nome").val();
                var email = $("#email").val();
                var telefone = $("#telefone").val();
                var mensagem = $("#mensagem").val();

                var regmail = /^[\w!#$%&amp;'*+\/=?^`{|}~-]+(\.[\w!#$%&amp;'*+\/=?^`{|}~-]+)*@(([\w-]+\.)+[A-Za-z]{2,6}|\[\d{1,3}(\.\d{1,3}){3}\])$/;
            if (!regmail.test($("#email").val())) {
                $('#erroEmail').css('display','block');
                passa = false;
                }else if (($('#nome').val() == nomeVal) || $('#nome').val().length < 3 ){
                        $('#erroNome').css('display','block');
                passa = false;
            } else {
                $('#erroEmail').css('display','none');
                $('#erroNome').css('display','none');

                // Exibe mensagem de carregamento
                $("#status").html("<center><img src='templates/img/enviarEmail.gif' alt='Enviando' /></center>");
                // Fazemos a requisão ajax com o arquivo envia.php e enviamos os valores de cada campo através do método POST
                $.post('php/exec_contato.php', {nome: nome, email: email, telefone: telefone, mensagem: mensagem, }, function(resposta) {
                                // Quando terminada a requisição
                                // Exibe a div status
                                $("#status").slideDown();
                                // Se a resposta é um erro
                                if (resposta != false) {
                                        // Exibe o erro na div
                                        $("#status").html(resposta);
                                }
                                // Se resposta for false, ou seja, não ocorreu nenhum erro
                                else {
                                        // Limpando todos os campos
                                        $("#nome").val("");
                                        $("#email").val("");
                                        $("#telefone").val("");
                                        $("#mensagem").val("");
                                }
                });
                }
        });

como vc pode reparar, a mensagem de que o campo esta vazio não é um alert, no lugar vai mudar a propriedade de um spam no formulario e caso o campo esteja vazio ele vai mostrar na tela, se todos estiverem ok vai chamar a função em ajax, e é ai que não to conseguindo fazer, acredito que eu esteja errando nos if e else da validação

me ajuda, só novato na empresa mas só manjo PHP, vlw e bom final de semana

Reply ↓

Rafael Couto

Desenvolvimento e simplicidade na web

Validando Formulários com Javascript

1. Criando o formulário:

2. Criando a função validar()

Conclusão

16 comments

Deixe um Comentário Cancelar resposta