Validações de formulário com Javascript

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>

Nome:

Email:

Senha:

Repitir Senha:

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

function validar() {

}

</script>

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

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 sejaform1.nome.value (Valor do campo nome do nosso formulário);

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

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

Pesquisar este blog

Analise e Desenvolvimento de Sistemas