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:

– 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):

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

– 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;

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;

– 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.

– 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