Scribd Logo
Upload

Welcome to Scribd!

  • Validação de Formulário em JavaScript

    Uploaded by

    Vavá Ngove
    156 views10 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    156 views10 pages

    Validação de Formulário em JavaScript

    Uploaded by

    Vavá Ngove

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 10

    Validao de Formulrio em JavaScript

    Ol amigos, hoje em dia um dos usos mais comuns na programao JavaScript com certeza a validao de campos, isso porque no precisamos direcionar o usurio para uma nova pgina, a validao feita via Browser, ou seja, o resultado da validao exibido em um alert. O nosso formulrio ter os seguintes campos: - Nome - E-Mail - Idade - Endereo - Telefone - Data de Nascimento - Senha - Confirmao de Senha - Sexo Este o cdigo do formulrio:
    <html> <head> <title> Cadastro com Validao </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> Endereo: <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"> (Mnimo: 6 caracteres)<br><br> Confirmao 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 ns queremos que o formulrio seja validado ao envi-lo, vamos usar o evento onsubmit na tag form. O nome da funo JavaScript que usaremos para validar ser "valida", e se houver algum erro, ela retornar false, caso contrrio, 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 funo o prprio formulrio, ou seja, o argumento recebido pela funo ser o formulrio, isso facilitar o acesso seus campos. Agora vamos criar a nossa funo. Na tag <head>, digite:
    <script> function valida(form) { } </script>

    Vamos comear validando o nome. A validao do nome muito simples, ela apenas no pode estar em branco. A est o cdigo da validao do nome, ele ser explicado logo abaixo:
    if (form.nome.value=="") { alert("Preencha o nome corretamente."); form.nome.focus(); return false; }

    A primeira linha comea uma condio, ela puxa o campo, usando form para usar o formulrio passado para a funo, 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 validao 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 expresso regular que exige o formato de um e-mail. A segunda linha testa o campo e-mail para ver se ela est nos padres do filtro. Se no estiver, alerta o cliente, coloca o foco no campo e-mail e retorna falso. Para validar a idade, precisaremos de outra funo chamada IsNum, que verifica se um valor nmero ou no. Aqui est esta funo, coloque-a antes da funo 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 funo verifica se a idade vazio ou se ela no nmero. Se alguma dessas condies for verdadeira (vazio ou no nmero) ela alerta o cliente, coloca o foco no campo idade e retorna false. Agora o endereo. Aqui est:
    if (form.endereco.value=="" || form.endereco.value.length < 8) { alert("Preencha o endereo corretamente."); form.endereco.focus(); return false; }

    Aqui basicamente a mesma coisa: a funo verifica se o campo est vazio, ou se o nmero de caracteres no valor dele (.length) menor que 8. Se alguma dessas condies for verdadeira, a funo alerta o cliente, coloca o foco no campo endereo e retorna false. A verificao do telefone bastante simples, s preciso verificar se ele est nulo, pois faremos outra funo para formatar o telefone mais tarde.
    if (form.tel.value=="") { alert("Preencha o telefone corretamente."); form.tel.focus(); return false; }

    Acho que no precisa de explicaes nesta parte. A data de nascimento, como foi informado no formulrio, tem que ter este formato: dd/mm/aaaa, ou seja, obrigatrio que tenha 10 caracteres, ento ns 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 confirmao de senha tem validaes iguais, ambas no podem estar nulas e tem que ter 6 caracteres ou mais. Aqui est a validao 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 confirmao de senha corretamente."); form.conf_senha.focus(); return false; }

    Agora, vamos verificar se a senha e sua confirmao esto iguais:


    if (form.senha.value!=form.conf_senha.value) { alert("A senha e a confirmao tem de ser iguais."); form.conf_senha.focus(); return false; }

    Agora a ltima parte das validaes, o sexo. Quando ns 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 no esto checked, se for verdadeiro, ocorre erro, se no, 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, aparea "dd/mm/aaa" ao invs 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 funo valida, agora vamos criar a funo telefone. Seu cdigo deve estar assim at agora:

    <html> <head> <title> Cadastro com Validao </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 endereo 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 confirmao de senha corretamente."); form.conf_senha.focus(); return false; } if (form.senha.value!=form.conf_senha.value) { alert("A senha e a confirmao 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> Endereo: <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"> (Mnimo: 6 caracteres)<br><br> Confirmao 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 funo valida, crie a funo telefone, com o argumento f (form):
    function telefone(f) { }

    Ns queremos que esta funo seja ativada quando voc tirar o foco do campo telefone (OnBlur), ento 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 funo o formulrio atual, para facilitar o acesso aos campos. O que esta funo 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 contrrio, no poder ser feita a formatao, ento coloque isso na funo:
    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 cdigo que ser executado caso o nmero esteja correto. A partir de agora escreva tudo dentro do bloco else. Agora ns precisamos pegar o DDD escrito. Sabemos que o DDD so os dois primeiros caracteres do campo, para isso, usamos a funo substring:
    ddd = f.tel.value.substring(0,2);

    Ele pega os caracteres do 0 ao 2. Agora ns precisamos identificar a primeira e a segunda parte do telefone, para separarmors com hfen. Mas, como o telefone pode ter 7 ou 8 digitos (9 ou 10 caracteres com o DDD), precisamos fazer uma verificao, e dependendo do nmero 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 dvida s comentar, postar no frum ou me mande um e-mail

    para augustoclaro1@hotmail.com Aqui est o cdigo final completo:


    <html> <head> <title> Cadastro com Validao </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 endereo 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 confirmao de senha corretamente."); form.conf_senha.focus(); return false; } if (form.senha.value!=form.conf_senha.value) { alert("A senha e a confirmao 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> Endereo: <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"> (Mnimo: 6

    caracteres)<br><br> Confirmao de Senha: <input type="password" name="conf_senha"><br><br> Sexo: <input type="radio" name="sexo" value="masc"> Masculino type="radio" name="sexo" value="fem"> Feminino<br><br> <input type="submit" value="Enviar"> </form> </body> </html>

    <input

    You might also like