Validar data de Nascimento e mostrar idade em javascript

Fórum sobre: JavaScript, XML, AJAX e jQuery
Assista o vídeo    Busque no Youtube
kuster_01
NOVO MEMBRO
NOVO MEMBRO
Mensagens: 8
Registrado em: Qui Out 11, 2012 11:34 PM
Sexo: Masculino

Validar data de Nascimento e mostrar idade em javascript

Mensagempor kuster_01 » Qui Out 11, 2012 11:54 PM

Estou com uma dúvida. Tenho um formulário onde preciso validar a data de nascimento e após a data ser validada ela deve retornar no campo ao lado a idade atual. Tenho dois códigos, um que valida data de nascimento e verifica se a data é válida, e o outro que calcula a idade. Estou precisando unir estas duas funções em um único código. Se alguém puder me ajudar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>


Código: Selecionar todos   Testar HTML   Testar PHP   Testar MySQL   Como Funciona

<script type="text/javascript">
function validarData(campo){
var expReg = /^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[1-2][0-9]\d{2})$/;
var msgErro = 'Formato inválido de data.';
if ((campo.value.match(expReg)) && (campo.value!='')){
var dia = campo.value.substring(0,2);
var mes = campo.value.substring(3,5);
var ano = campo.value.substring(6,10);
if(mes==4 || mes==6 || mes==9 || mes==11 && dia > 30){
alert("Dia incorreto !!! O mês especificado contém no máximo 30 dias.");
return false;
} else{
if(ano%4!=0 && mes==2 && dia>28){
alert("Data incorreta!! O mês especificado contém no máximo 28 dias.");
return false;
} else{
if(ano%4==0 && mes==2 && dia>29){
alert("Data incorreta!! O mês especificado contém no máximo 29 dias.");
return false;
} else{   
alert ("Data correta!");
return true;
}}}} else {
alert(msgErro);
campo.focus();
return false;
}}

</script>
</HEAD>
<BODY>


Preciso utilizar este código acima e adicionar a funcionalidade de calcular a idade do código abaixo.

Código: Selecionar todos   Testar HTML   Testar PHP   Testar MySQL   Como Funciona

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>idade apartir de uma data de nascimento</title>
<script>

function calculateAge(dobString) {
var dob = new Date(dobString);
var currentDate = new Date();
var currentYear = currentDate.getFullYear();
var birthdayThisYear = new Date(currentYear, dob.getMonth(), dob.getDate());
var age = currentYear - dob.getFullYear();
if(birthdayThisYear > currentDate) {
age--;
}
return age;
}
function calcular(data) {
var data = document.form.nascimento.value;
var partes = data.split("/");
var junta = partes[2]+"-"+partes[1]+"-"+partes[0];
document.form.idade.value = (calculateAge(junta));
}
</script>
<form name="form">
<input type="text" name="nascimento" value="" onblur="calcular()">
<input type="text" name="idade" value="">
<input type="button" value="calcular" onclick="calcular()">
</form>

</head>

<body>
</body>
</html>


Se alguém puder me ajudar, dado dica de como unir essas duas funcionalidades no meu formulário.

MOVIDO PARA JAVASCRIPT
0

web
ADMIN
ADMIN
Mensagens: 15806
Registrado em: Sáb Jan 20, 2007 6:08 PM
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contacto:

Validar data de Nascimento e mostrar idade em javascript

Mensagempor web » Sex Out 12, 2012 9:27 AM

Fiz algumas mudanças na lógica do script, criando ifs baseado no mês e sub-ifs baseado no dia. Dá uma conferida

Código: Selecionar todos   Testar HTML   Testar PHP   Testar MySQL   Como Funciona

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>idade apartir de uma data de nascimento</title>
<script>
function validarData(campo){
var expReg = /^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[1-2][0-9]\d{2})$/;
var msgErro = 'Formato inválido de data.';
if ((campo.value.match(expReg)) && (campo.value!='')){
var dia = campo.value.substring(0,2);
var mes = campo.value.substring(3,5);
var ano = campo.value.substring(6,10);

if(mes==1 || mes==3 || mes==5 || mes==7 || mes==8 || mes==10 || mes==12){
// VALIDAR DIA 31
if(dia != 31) {
alert("Dia incorreto !!! O mês especificado contém no exatamente 31 dias.");
document.getElementById('calcular').disabled=true;
return false;
} else {
document.getElementById('calcular').disabled=false;
}
// FIM DO VALIDAR DIA 31
}

if(mes==4 || mes==6 || mes==9 || mes==11){
// VALIDAR DIA 30
if(dia > 30) {
alert("Dia incorreto !!! O mês especificado contém no máximo 30 dias.");
document.getElementById('calcular').disabled=true;
return false;
} else {
document.getElementById('calcular').disabled=false;
}
// FIM DO VALIDAR DIA 30
}

if(mes==2) {
// VALIDAR DIA 28 E ANO
if(dia > 28 && ano%4!=0) {
alert("Dia incorreto !!! O mês especificado contém no máximo 28 dias.");
document.getElementById('calcular').disabled=true;
return false;
} else {
document.getElementById('calcular').disabled=false;
} // FIM DO VALIDAR DIA 28 E ANO

// VALIDAR DIA 29 E ANO
if(dia > 29 && ano%4==0) {
alert("Dia incorreto !!! O mês especificado contém no máximo 29 dias.");
document.getElementById('calcular').disabled=true;
return false;
} else {
document.getElementById('calcular').disabled=false;
} // FIM DO VALIDAR DIA 29 E ANO
}

} else {
alert(msgErro);
document.getElementById('calcular').disabled=true;
campo.focus();
return false;
}

}

function calculateAge(dobString) {
var dob = new Date(dobString);
var currentDate = new Date();
var currentYear = currentDate.getFullYear();
var birthdayThisYear = new Date(currentYear, dob.getMonth(), dob.getDate());
var age = currentYear - dob.getFullYear();
if(birthdayThisYear > currentDate) {
age--;
}
return age;
}
function calcular(data) {
var data = document.form.nascimento.value;
var partes = data.split("/");
var junta = partes[2]+"-"+partes[1]+"-"+partes[0];
document.form.idade.value = (calculateAge(junta));
}
</script>
<form name="form">
<input type="text" name="nascimento" id="nascimento" value="" onblur="validarData(document.form.nascimento)">
<input type="text" name="idade" value="">
<input type="button" value="calcular" id="calcular" onclick="calcular()" disabled="disabled">
</form>
</head>
<body>
</body>
</html>
Se gostou do conteúdo, participe e divulgue.
1

kuster_01
NOVO MEMBRO
NOVO MEMBRO
Mensagens: 8
Registrado em: Qui Out 11, 2012 11:34 PM
Sexo: Masculino

Validar data de Nascimento e mostrar idade em javascript

Mensagempor kuster_01 » Sex Out 12, 2012 12:29 PM

Testei o código, mas está dando alguns erros. Eu digito a data 12/12/1980 por exemplo, e o script me retorna um alert "dia incorreto, o mês especificado contém exatamente 31 dias".
Mas valeu pela ajuda, vou dar uma analisada e tentar acertar. Caso alguém possa mostrar onde está ocorrendo este erro, serei muito grato pela ajuda. Vou tentar acertar aqui. Mas por hora muito obrigado pela ajuda, já me deu uma boa idéia para tentar unificar os scripts.
0

web
ADMIN
ADMIN
Mensagens: 15806
Registrado em: Sáb Jan 20, 2007 6:08 PM
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contacto:

Validar data de Nascimento e mostrar idade em javascript

Mensagempor web » Sex Out 12, 2012 12:31 PM

Foi uma falha minha.

Nesse if

if(mes==1 || mes==3 || mes==5 || mes==7 || mes==8 || mes==10 || mes==12){
// VALIDAR DIA 31
if(dia != 31) {

O correto é
if(dia > 31) {
Se gostou do conteúdo, participe e divulgue.
0

kuster_01
NOVO MEMBRO
NOVO MEMBRO
Mensagens: 8
Registrado em: Qui Out 11, 2012 11:34 PM
Sexo: Masculino

Validar data de Nascimento e mostrar idade em javascript

Mensagempor kuster_01 » Sex Out 12, 2012 3:09 PM

Agora está validando a data corretamente, no entanto, não está retornando no campo ao lado a idade atual da pessoa. Estou dando uma estudada no código e tentando resolver aqui. O que estou querendo é, que quando a pessoa digitar a data de nascimento, já apareça no campo ao lado a idade.
0

web
ADMIN
ADMIN
Mensagens: 15806
Registrado em: Sáb Jan 20, 2007 6:08 PM
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contacto:

Validar data de Nascimento e mostrar idade em javascript

Mensagempor web » Sex Out 12, 2012 3:21 PM

Isso é bem simples. No script, você encontra essa linha

Código: Selecionar todos   Testar HTML   Testar PHP   Testar MySQL   Como Funciona

document.getElementById('calcular').disabled=false;

Ela é repetida várias vezes no código, serve para habilitar o botão calcular quando a data estiver correta.

Já a função calcular() é chamada no clique do botão calcular. Então basta você colocar o seguinte após a linha acima que indiquei.

Código: Selecionar todos   Testar HTML   Testar PHP   Testar MySQL   Como Funciona

calcular();

Coloca isso embaixo de cada linha do disabled true acima.

Fazendo isso, quando a data estiver correta, já vai exibir direto a idade no input.
Se gostou do conteúdo, participe e divulgue.
0

kuster_01
NOVO MEMBRO
NOVO MEMBRO
Mensagens: 8
Registrado em: Qui Out 11, 2012 11:34 PM
Sexo: Masculino

Validar data de Nascimento e mostrar idade em javascript

Mensagempor kuster_01 » Sex Out 12, 2012 3:28 PM

Muito obrigado, agora deu certo.
Agora vou tentar adaptar ao meu formulário esta função.
0

web
ADMIN
ADMIN
Mensagens: 15806
Registrado em: Sáb Jan 20, 2007 6:08 PM
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contacto:

Validar data de Nascimento e mostrar idade em javascript

Mensagempor web » Sex Out 12, 2012 3:31 PM

;)
Se gostou do conteúdo, participe e divulgue.
0

kuster_01
NOVO MEMBRO
NOVO MEMBRO
Mensagens: 8
Registrado em: Qui Out 11, 2012 11:34 PM
Sexo: Masculino

Validar data de Nascimento e mostrar idade em javascript

Mensagempor kuster_01 » Sex Out 12, 2012 4:25 PM

Agora o problema é fazer a função funcionar com o resto do meu formulário. Fiz algumas adaptação no form, mas só funciona a primeira função. Pergunto, como posso fazer todas as funções de validação funcionar no form. Vou postar meu formulário completo.

Código: Selecionar todos   Testar HTML   Testar PHP   Testar MySQL   Como Funciona

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Cadastro de Hobbies</title> 
<style> 
.borda { 
    border: thin solid #000; 

</style> 
 
<script language="javascript" > 
 
        function valida_end(form){ 
             
         var padrao = /[a-z]+\s+[a-z]+/gi; 
                 
         var text = document.getElementById('txt_nome'); 
                 
        if (!padrao.test(text.value)) {   
                alert("Digite Nome e Sobrenome"); 
                form.txt_nome.focus(); 
                return false; 
            } 
                                 
         if (form.txt_endereco.value== "" || form.txt_endereco.value.length <2) { 
               alert("Preencha o endereço corretamente."); 
               form.txt_endereco.focus(); 
               return false; 
            } 
             
         if (form.rdo_sexo[0].checked==false && form.rdo_sexo[1].checked==false) { 
              alert("Selecione o sexo."); 
              return false; 
         } 
      
      }
   
   
      function validarData(campo){
            var expReg = /^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[1-2][0-9]\d{2})$/;
            var msgErro = 'Formato inválido de data.';
            if ((campo.value.match(expReg)) && (campo.value!='')){
            var dia = campo.value.substring(0,2);
            var mes = campo.value.substring(3,5);
            var ano = campo.value.substring(6,10);
            
            if(mes==1 || mes==3 || mes==5 || mes==7 || mes==8 || mes==10 || mes==12){
            // VALIDAR DIA 31
            if(dia > 31) { 
            alert("Dia incorreto !!! O mês especificado contém no exatamente 31 dias.");
            document.getElementById('calcular').disabled=true;
            return false;
            } else {
            document.getElementById('calcular').disabled=false;
            calcular();
            }
            // FIM DO VALIDAR DIA 31
            }
            
            if(mes==4 || mes==6 || mes==9 || mes==11){
            // VALIDAR DIA 30
            if(dia > 30) {
            alert("Dia incorreto !!! O mês especificado contém no máximo 30 dias.");
            document.getElementById('calcular').disabled=true;
            return false;
            } else {
            document.getElementById('calcular').disabled=false;
            calcular();
            }
            // FIM DO VALIDAR DIA 30
            }
            
            if(mes==2) {
            // VALIDAR DIA 28 E ANO
            if(dia > 28 && ano%4!=0) {
            alert("Dia incorreto !!! O mês especificado contém no máximo 28 dias.");
            document.getElementById('calcular').disabled=true;
            return false;
            } else {
            document.getElementById('calcular').disabled=false;
            calcular();
            } // FIM DO VALIDAR DIA 28 E ANO
            
            // VALIDAR DIA 29 E ANO
            if(dia > 29 && ano%4==0) {
            alert("Dia incorreto !!! O mês especificado contém no máximo 29 dias.");
            document.getElementById('calcular').disabled=true;
            return false;
            } else {
            document.getElementById('calcular').disabled=false;
            calcular();
            } // FIM DO VALIDAR DIA 29 E ANO
            }
            
            } else {
            alert(msgErro);
            document.getElementById('calcular').disabled=true;
            campo.focus();
            return false;
            }
            
            }
            
            function calculateAge(dobString) {
            var dob = new Date(dobString);
            var currentDate = new Date();
            var currentYear = currentDate.getFullYear();
            var birthdayThisYear = new Date(currentYear, dob.getMonth(), dob.getDate());
            var age = currentYear - dob.getFullYear();
            if(birthdayThisYear > currentDate) {
            age--;
            }
            return age;
            }
            function calcular(data) {
            var data = document.form.txt_idade.value;
            var partes = data.split("/");
            var junta = partes[2]+"-"+partes[1]+"-"+partes[0];
            document.form.idade.value = (calculateAge(junta));
            }
   
   
       function valida_end2(form){
       
         
         
        if (form.chk_hobbies[0].checked==false && 
            form.chk_hobbies[1].checked==false && 
            form.chk_hobbies[2].checked==false && 
            form.chk_hobbies[3].checked==false && 
            form.chk_hobbies[4].checked==false && 
            form.chk_hobbies[5].checked==false && 
            form.chk_hobbies[6].checked==false && 
            form.chk_hobbies[7].checked==false){ 
            alert("Selecione os Hobbies."); 
            return false; 
 
        } 
         
     
        var padrao2 = /[a-z]+\s+[a-z]+/gi; 
        var text = document.getElementById('txa_comentario'); 
                 
        if (!padrao2.test(text.value)) {   
              alert("Comente um pouco sobre você!"); 
              form.txa_comentario.focus(); 
              return false; 
           }       
        }     
         
        </script> 
</head> 
 
<body> 
<form name="frmhobbie" onsubmit=" return valida_end(this)" method="post" action=""> 
<form name="frmhobbie" method="post" action=""> 
<table width="366" align="left" class="borda" cellpadding="0" cellspacing="0" border="1"> 
    <tr> 
 
<td width="121"><label for="txt_nome">Nome</label></td> 
    <td width="194"><input type="text" name="txt_nome" id="txt_nome" valeu=""/></td> 
  </tr> 
  <tr> 
    <td><label for="txt_endereco">Endereço</label></td> 
    <td><input type="text" name="txt_endereco" id="txt_endereco" value="" /></td> 
  </tr> 
  <tr> 
    <td><label for="rdo_sexo_0">Sexo</label></td> 
    <td><p> 
      <label> 
        <input type="radio" name="rdo_sexo" value="M" id="rdo_sexo_0" /> 
        Masculino</label> 
      <br /> 
      <label> 
        <input type="radio" name="rdo_sexo" value="F" id="rdo_sexo_1" /> 
        Feminino</label> 
      <br /> 
    </p></td> 
  </tr> 
  <tr> 
    <td><label for="slt_civil">Estado Civil</label></td> 
    <td> 
        <select name="slt_civil" id="slt_civil"> 
        <option value="">--------------------------</option> 
        <option value="S">Solteiro(a)</option> 
        <option value="C">Casado(a)</option> 
        <option value="V">Viúvo(a)</option> 
        <option value="D">Divorciado(a)</option> 
        <option value="J">Separado(a) judicialmente </option> 
      </select> 
    </td> 
  </tr> 
  <tr> 
    <td><label for="txt_idade">Data de Nascimento</label></td> 
    <td><input type="text" name="txt_idade" id="txt_idade" value="" maxlength="10" size="12" />     
    <input type="text" name="idade" id="idade" onblur="calcular()" value="" maxlength="5" size="5"/></td>
   
  </tr> 
  <tr> 
    <td colspan="2">Hobbies</td> 
    </tr> 
  <tr> 
    <td colspan="2"><table width="100%"> 
 
      <tr> 
        <td><label> 
          <input type="checkbox" name="chk_hobbies" value="1" id="chk_hobbies_0" /> 
          Esporte</label></td> 
        <td><label> 
          <input type="checkbox" name="chk_hobbies" value="2" id="chk_hobbies_1" /> 
          Jardinagem</label></td> 
      </tr> 
      <tr> 
        <td><label> 
          <input type="checkbox" name="chk_hobbies" value="3" id="chk_hobbies_2" /> 
          Pintura</label></td> 
        <td><label> 
          <input type="checkbox" name="chk_hobbies" value="4" id="chk_hobbies_3" /> 
          Corte & Custura</label></td> 
      </tr> 
      <tr> 
        <td><label> 
          <input type="checkbox" name="chk_hobbies" value="5" id="chk_hobbies_4" /> 
          Musica</label></td> 
        <td><label> 
          <input type="checkbox" name="chk_hobbies" value="6" id="chk_hobbies_5" /> 
          Meditação</label></td> 
      </tr> 
      <tr> 
        <td><label> 
          <input type="checkbox" name="chk_hobbies" value="7" id="chk_hobbies_6" /> 
          Leitura</label></td> 
        <td><label> 
          <input type="checkbox" name="chk_hobbies" value="8" id="chk_hobbies_7" /> 
          Jogos Eletrônicos</label></td> 
      </tr> 
      <tr> 
        <td colspan="2" align="center"><input type="button" name="btn_addhoobies" id="btn_addhoobies" value="Adicionar Hobbies" /></td> 
          </tr> 
    </table></td> 
    </tr> 
  <tr> 
    <td colspan="2"><label for="txa_comentario">Comente um pouco sobre você</label></td> 
    </tr> 
  <tr> 
 
<td colspan="2"><textarea rows="5" cols="50" name="txa_comentario" id="txa_comentario"></textarea></td> 
    </tr> 
  <tr> 
    <td colspan="2" align="center"><input type="submit" name="sbm_enviar" id="sbm_enviar" value="Enviar" onclick="calcular()"/> <input type="reset" name="rst_limpar" id="rst_limpar" value="Limpar" /></td> 
    </tr> 
</table> 
</form> 
</body> 
</html> 
0

web
ADMIN
ADMIN
Mensagens: 15806
Registrado em: Sáb Jan 20, 2007 6:08 PM
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contacto:

Validar data de Nascimento e mostrar idade em javascript

Mensagempor web » Sex Out 12, 2012 4:46 PM

Tem vários erros no seu código.

Primeiro, tem 2 forms

Código: Selecionar todos   Testar HTML   Testar PHP   Testar MySQL   Como Funciona

<form name="frmhobbie" onsubmit=" return valida_end(this)" method="post" action="">
<form name="frmhobbie" method="post" action="">

Deve ter somente 1, e com o name form, de acordo com o script da data.

Você não colocou o onblur no input que recebe a data

Código: Selecionar todos   Testar HTML   Testar PHP   Testar MySQL   Como Funciona

 onblur="validarData(document.form.txt_idade)"

Na função calcular(), você tem que definir para qual input vai a idade

document.form.idade.value = (calculateAge(junta));
Se gostou do conteúdo, participe e divulgue.
0


OS MAIS RECENTES

COMENTÁRIOS
Ainda não há comentários. Seja o primeiro!

COMENTAR


Voltar para “JavaScript, XML e jQuery”

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado

Rolar para o topo