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.
