Categorias
Validação de Formulário em JavaScript
Olá amigos, hoje em dia um dos usos mais comuns na programação JavaScript com certeza é a validação de campos, isso porque não precisamos direcionar o usuário para uma nova página, a validação é feita via Browser, ou seja, o resultado da validação é exibido em um alert.
O nosso formulário terá os seguintes campos:
- Nome
- E-Mail
- Idade
- Endereço
- Telefone
- Data de Nascimento
- Senha
- Confirmação de Senha
- Sexo
Este é o código do formulário:
<html>
<head>
<title> Cadastro com Validação </title>
</head>
<body>
<form>
Nome: <input type="text" name="nome"><br><br>
E-mail: <input type="text" name="email"><br><br>
Idade: <input type="text" name="idade" maxlength="2" size="2"><br><br>
Endereço: <input type="text" name="endereco"><br><br>
Telefone: <input type="text" name="tel" maxlength="10"> (Formato: DDD+TELEFONE: 1122223333)<br><br>
Data de Nascimento: <input type="text" name="data_nascimento"><br><br>
Senha: <input type="password" name="senha"> (Mínimo: 6 caracteres)<br><br>
Confirmação de Senha: <input type="password" name="conf_senha"><br><br>
Sexo: <input type="radio" name="sexo" value="masc"> Masculino <input type="radio" name="sexo" value="fem"> Feminino<br><br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Como nós queremos que o formulário seja validado ao enviá-lo, vamos usar o evento onsubmit na tag form. O nome da função JavaScript que usaremos para validar será "valida", e se houver algum erro, ela retornará false, caso contrário, retornará true. Vamos adicionar na tag form: onsubmit="return valida(this);", ela deve estar assim:
<form onsubmit="return valida(this);">
O argumento (this) enviado para a função é o próprio formulário, ou seja, o argumento recebido pela função será o formulário, isso facilitará o acesso à seus campos.
Agora vamos criar a nossa função. Na tag <head>, digite:
<script>
function valida(form) {
}
</script>
Vamos começar validando o nome. A validação do nome é muito simples, ela apenas não pode estar em branco. Aí está o código da validação do nome, ele será explicado logo abaixo:
if (form.nome.value=="") {
alert("Preencha o nome corretamente.");
form.nome.focus();
return false;
}
A primeira linha começa uma condição, ela puxa o campo, usando form para usar o formulário passado para a função, nome para pegar o campo, e value pagar pegar o valor do campos, e verifica se o valor é nulo. Se for, ele alerta o cliente, coloca o foco no campo Nome e retorna false.
Agora vamos validar o e-mail. Vamos usar regular expression. Aqui está a validação do e-mail:
var filtro_mail = /^.+@.+\..{2,3}$/
if (!filtro_mail.test(form.email.value) || form.email.value=="") {
alert("Preencha o e-mail corretamente.");
form.email.focus();
return false;
}
A primeira linha cria uma expressão regular que exige o formato de um e-mail. A segunda linha testa o campo e-mail para ver se ela está nos padrões do filtro. Se não estiver, alerta o cliente, coloca o foco no campo e-mail e retorna falso.
Para validar a idade, precisaremos de outra função chamada IsNum, que verifica se um valor é número ou não. Aqui está esta função, coloque-a antes da função valida:
function IsNum(v)
{
var ValidChars = "0123456789";
var IsNumber=true;
var Char;
for (i = 0; i < v.length && IsNumber == true; i++)
{
Char = v.charAt(i);
if (ValidChars.indexOf(Char) == -1)
{
IsNumber = false;
}
}
return IsNumber;
}
Agora vamos validar a idade:
if (form.idade.value=="" || !IsNum(form.idade.value)) {
alert("Preencha a idade corretamente.");
form.idade.focus();
return false;
}
Na primeira linha a função verifica se a idade é vazio ou se ela não é número.
Se alguma dessas condições for verdadeira (vazio ou não número) ela alerta o cliente, coloca o foco no campo idade e retorna false.
Agora o endereço. Aqui está:
if (form.endereco.value=="" || form.endereco.value.length < 8) {
alert("Preencha o endereço corretamente.");
form.endereco.focus();
return false;
}
Aqui é basicamente a mesma coisa: a função verifica se o campo está vazio, ou se o número de caracteres no valor dele (.length) é menor que 8. Se alguma dessas condições for verdadeira, a função alerta o cliente, coloca o foco no campo endereço e retorna false.
A verificação do telefone é bastante simples, só é preciso verificar se ele está nulo, pois faremos outra função para formatar o telefone mais tarde.
if (form.tel.value=="") {
alert("Preencha o telefone corretamente.");
form.tel.focus();
return false;
}
Acho que não precisa de explicações nesta parte.
A data de nascimento, como foi informado no formulário, tem que ter este formato: dd/mm/aaaa, ou seja, é obrigatório que tenha 10 caracteres, então nós vamos apenas verificar se está nulo ou se tem caracteres diferentes de 10:
if (form.data_nascimento.value=="" || form.data_nascimento.value.length != 10) {
alert("Preencha a data de nascimento corretamente.");
form.data_nascimento.focus();
return false;
}
A senha e a confirmação de senha tem validações iguais, ambas não podem estar nulas e tem que ter 6 caracteres ou mais. Aqui está a validação de ambas:
if (form.senha.value=="" || form.senha.value.length < 6) {
alert("Preencha a senha corretamente.");
form.senha.focus();
return false;
}
if (form.conf_senha.value=="" || form.conf_senha.value.length < 6) {
alert("Preencha a confirmação de senha corretamente.");
form.conf_senha.focus();
return false;
}
Agora, vamos verificar se a senha e sua confirmação estão iguais:
if (form.senha.value!=form.conf_senha.value) {
alert("A senha e a confirmação tem de ser iguais.");
form.conf_senha.focus();
return false;
}
Agora a última parte das validações, o sexo. Quando nós usamos form.sexo, nos retorna uma array com os campos radio. Para que o cliente possa continuar, ou a form.sexo[0](a primeira) ou a form.sexo[1](a segunda) tem que estar checked (checked==true), para isso, verificaremos se as duas não estão checked, se for verdadeiro, ocorre erro, se não, o cliente prossegue:
if (form.sexo[0].checked==false && form.sexo[1].checked==false) {
alert("Selecione o sexo.");
return false;
}
}
Agora, no campo data de nascimento, vamos fazer com que, se o campo estiver vazio, apareça "dd/mm/aaa" ao invés de nada. O seu campo deve ficar assim:
Data de Nascimento: <input type="text" name="data_nascimento" value="dd/mm/aaaa" maxlength="10" onfocus="if (this.value=='dd/mm/aaaa'){this.value='';}" onblur="if (this.value==''){this.value='dd/mm/aaaa';}"><br><br>
Acabamos a função valida, agora vamos criar a função telefone. Seu código deve estar assim até agora:
<html>
<head>
<title> Cadastro com Validação </title>
<script>
function IsNum(v)
{
var ValidChars = "0123456789";
var IsNumber=true;
var Char;
for (i = 0; i < v.length && IsNumber == true; i++)
{
Char = v.charAt(i);
if (ValidChars.indexOf(Char) == -1)
{
IsNumber = false;
}
}
return IsNumber;
}
function valida(form) {
if (form.nome.value=="") {
alert("Preencha o nome corretamente.");
form.nome.focus();
return false;
}
var filtro_mail = /^.+@.+\..{2,3}$/
if (!filtro_mail.test(form.email.value) || form.email.value=="") {
alert("Preencha o e-mail corretamente.");
form.email.focus();
return false;
}
if (form.idade.value=="" || !IsNum(form.idade.value)) {
alert("Preencha a idade corretamente.");
form.idade.focus();
return false;
}
if (form.endereco.value=="" || form.endereco.value.length < 8) {
alert("Preencha o endereço corretamente.");
form.endereco.focus();
return false;
}
if (form.tel.value=="") {
alert("Preencha o telefone corretamente.");
form.tel.focus();
return false;
}
if (form.data_nascimento.value=="" || form.data_nascimento.value.length != 10) {
alert("Preencha a data de nascimento corretamente.");
form.data_nascimento.focus();
return false;
}
if (form.senha.value=="" || form.senha.value.length < 6) {
alert("Preencha a senha corretamente.");
form.senha.focus();
return false;
}
if (form.conf_senha.value=="" || form.conf_senha.value.length < 6) {
alert("Preencha a confirmação de senha corretamente.");
form.conf_senha.focus();
return false;
}
if (form.senha.value!=form.conf_senha.value) {
alert("A senha e a confirmação tem de ser iguais.");
form.conf_senha.focus();
return false;
}
if (form.sexo[0].checked==false && form.sexo[1].checked==false) {
alert("Selecione o sexo.");
return false;
}
}
</head>
<body>
<form onsubmit="return valida(this);">
Nome: <input type="text" name="nome"><br><br>
E-mail: <input type="text" name="email"><br><br>
Idade: <input type="text" name="idade" maxlength="2" size="2"><br><br>
Endereço: <input type="text" name="endereco"><br><br>
Telefone: <input type="text" name="tel" maxlength="10"> (Formato: DDD+TELEFONE: 1122223333)<br><br>
Data de Nascimento: <input type="text" name="data_nascimento" value="dd/mm/aaaa" maxlength="10" onfocus="if (this.value=='dd/mm/aaaa'){this.value='';}" onblur="if (this.value==''){this.value='dd/mm/aaaa';}"><br><br>
Senha: <input type="password" name="senha"> (Mínimo: 6 caracteres)<br><br>
Confirmação de Senha: <input type="password" name="conf_senha"><br><br>
Sexo: <input type="radio" name="sexo" value="masc"> Masculino <input type="radio" name="sexo" value="fem"> Feminino<br><br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Logo abaixo da função valida, crie a função telefone, com o argumento f (form):
function telefone(f) {
}
Nós queremos que esta função seja ativada quando você tirar o foco do campo telefone (OnBlur), então edite o seu campo telefone para que ele fique assim:
Telefone: <input type="text" name="tel" onblur="telefone(this.form);" maxlength="10"> (Formato: DDD+TELEFONE: 1122223333)<br><br>
O argumento passado (this.form) passa para a função o formulário atual, para facilitar o acesso aos campos.
O que esta função fará: ela editará o telefone para que ele fique nesta formato: (ddd) tele-fone.
Como o telefone pode ter 7 ou 8 digitos, com o DDD, o campo deve ter 9 ou 10 caracteres, caso contrário, não poderá ser feita a formatação, então coloque isso na função:
if (f.tel.value.length<9 || f.tel.value.length>10) {
alert("Preencha o telefone corretamente.");
f.tel.focus();
}else{
}
Dentro do bloco else vai o código que será executado caso o número esteja correto. A partir de agora escreva tudo dentro do bloco else. Agora nós precisamos pegar o DDD escrito. Sabemos que o DDD são os dois primeiros caracteres do campo, para isso, usamos a função substring:
ddd = f.tel.value.substring(0,2);
Ele pega os caracteres do 0 ao 2. Agora nós precisamos identificar a primeira e a segunda parte do telefone, para separarmors com hífen. Mas, como o telefone pode ter 7 ou 8 digitos (9 ou 10 caracteres com o DDD), precisamos fazer uma verificação, e dependendo do número de caracteres, pegar certa parte do campo:
if (f.tel.value.length==9) {
part1 = f.tel.value.substring(2,5);
part2 = f.tel.value.substring(5,9);
}
if (f.tel.value.length==10) {
part1 = f.tel.value.substring(2,6);
part2 = f.tel.value.substring(6,10);
}
Com isso já temos as partes que precismaos, agora só precisamos escrevê-las no campo formatadas:
f.tel.value = "("+ddd+") "+part1+"-"+part2
Caso o telefone digitado seja 1125885236, aparecerá isto no campo ao tirar o foco dele: (11) 2588-5236.
É isso gente, qualquer dúvida é só comentar, postar no fórum ou me mande um e-mail para augustoclaro1@hotmail.com
Aqui está o código final completo:
<html>
<head>
<title> Cadastro com Validação </title>
<script>
function IsNum(v)
{
var ValidChars = "0123456789";
var IsNumber=true;
var Char;
for (i = 0; i < v.length && IsNumber == true; i++)
{
Char = v.charAt(i);
if (ValidChars.indexOf(Char) == -1)
{
IsNumber = false;
}
}
return IsNumber;
}
function valida(form) {
if (form.nome.value=="") {
alert("Preencha o nome corretamente.");
form.nome.focus();
return false;
}
var filtro_mail = /^.+@.+\..{2,3}$/
if (!filtro_mail.test(form.email.value) || form.email.value=="") {
alert("Preencha o e-mail corretamente.");
form.email.focus();
return false;
}
if (form.idade.value=="" || !IsNum(form.idade.value)) {
alert("Preencha a idade corretamente.");
form.idade.focus();
return false;
}
if (form.endereco.value=="" || form.endereco.value.length < 8) {
alert("Preencha o endereço corretamente.");
form.endereco.focus();
return false;
}
if (form.tel.value=="") {
alert("Preencha o telefone corretamente.");
form.tel.focus();
return false;
}
if (form.data_nascimento.value=="" || form.data_nascimento.value.length != 10) {
alert("Preencha a data de nascimento corretamente.");
form.data_nascimento.focus();
return false;
}
if (form.senha.value=="" || form.senha.value.length < 6) {
alert("Preencha a senha corretamente.");
form.senha.focus();
return false;
}
if (form.conf_senha.value=="" || form.conf_senha.value.length < 6) {
alert("Preencha a confirmação de senha corretamente.");
form.conf_senha.focus();
return false;
}
if (form.senha.value!=form.conf_senha.value) {
alert("A senha e a confirmação tem de ser iguais.");
form.conf_senha.focus();
return false;
}
if (form.sexo[0].checked==false && form.sexo[1].checked==false) {
alert("Selecione o sexo.");
return false;
}
}
function telefone(f) {
if (f.tel.value.length<9 || f.tel.value.length>10) {
alert("Preencha o telefone corretamente.");
f.tel.focus();
}else{
ddd = f.tel.value.substring(0,2);
if (f.tel.value.length==9) {
part1 = f.tel.value.substring(2,5);
part2 = f.tel.value.substring(5,9);
}
if (f.tel.value.length==10) {
part1 = f.tel.value.substring(2,6);
part2 = f.tel.value.substring(6,10);
}
f.tel.value = "("+ddd+") "+part1+"-"+part2
}
}
</script>
</head>
<body>
<form onsubmit="return valida(this);">
Nome: <input type="text" name="nome"><br><br>
E-mail: <input type="text" name="email"><br><br>
Idade: <input type="text" name="idade" maxlength="2" size="2"><br><br>
Endereço: <input type="text" name="endereco"><br><br>
Telefone: <input type="text" name="tel" onblur="telefone(this.form);" maxlength="10"> (Formato: DDD+TELEFONE: 1122223333)<br><br>
Data de Nascimento: <input type="text" name="data_nascimento" value="dd/mm/aaaa" maxlength="10" onfocus="if (this.value=='dd/mm/aaaa'){this.value='';}" onblur="if (this.value==''){this.value='dd/mm/aaaa';}"><br><br>
Senha: <input type="password" name="senha"> (Mínimo: 6 caracteres)<br><br>
Confirmação de Senha: <input type="password" name="conf_senha"><br><br>
Sexo: <input type="radio" name="sexo" value="masc"> Masculino <input type="radio" name="sexo" value="fem"> Feminino<br><br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Obrigado.
Augusto Claro
quarta-feira,30 de dezembro de 2009
945 Vizualizações
Seja o primeiro a comentar !
Comente :
www.HelpMasters.com.br | Todos os direitos reservados