Validar data de Nascimento e mostrar idade em javascript


Fórum para dúvidas sobre JavaScript, ECMAScript, AJAX, XML e jQuery.

Moderador: web

Logar para Responder
Logar para Perguntar

 Validar data de Nascimento e mostrar idade em javascript
Por kuster_01 8 post(s) Offline NOVO MEMBRO  Masculino 0p em 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>


Selecionar - Numerar
<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.

Selecionar - Numerar
<!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 mais

15 resposta(s)

 Validar data de Nascimento e mostrar idade em javascript
Por web 15115 post(s) Offline ADMIN  Masculino 3337p em 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

Selecionar - Numerar
<!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>

0 mais

 Validar data de Nascimento e mostrar idade em javascript
Por kuster_01 8 post(s) Offline NOVO MEMBRO  Masculino 0p em 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 mais

 Validar data de Nascimento e mostrar idade em javascript
Por web 15115 post(s) Offline ADMIN  Masculino 3337p em 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) {

0 mais

 Validar data de Nascimento e mostrar idade em javascript
Por kuster_01 8 post(s) Offline NOVO MEMBRO  Masculino 0p em 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 mais

 Validar data de Nascimento e mostrar idade em javascript
Por web 15115 post(s) Offline ADMIN  Masculino 3337p em Sex Out 12, 2012 3:21 pm
Isso é bem simples. No script, você encontra essa linha

Selecionar - Numerar
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.

Selecionar - Numerar
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.

0 mais

 Validar data de Nascimento e mostrar idade em javascript
Por kuster_01 8 post(s) Offline NOVO MEMBRO  Masculino 0p em Sex Out 12, 2012 3:28 pm
Muito obrigado, agora deu certo.
Agora vou tentar adaptar ao meu formulário esta função.

0 mais

 Validar data de Nascimento e mostrar idade em javascript
Por web 15115 post(s) Offline ADMIN  Masculino 3337p em Sex Out 12, 2012 3:31 pm
;)

0 mais

 Validar data de Nascimento e mostrar idade em javascript
Por kuster_01 8 post(s) Offline NOVO MEMBRO  Masculino 0p em 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.

Selecionar - Numerar
<!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 mais

 Validar data de Nascimento e mostrar idade em javascript
Por web 15115 post(s) Offline ADMIN  Masculino 3337p em Sex Out 12, 2012 4:46 pm
Tem vários erros no seu código.

Primeiro, tem 2 forms

Selecionar - Numerar
<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

Selecionar - Numerar
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));

0 mais

 Validar data de Nascimento e mostrar idade em javascript
Por kuster_01 8 post(s) Offline NOVO MEMBRO  Masculino 0p em Sex Out 12, 2012 4:57 pm
Fiz os acertos que você falou, mas na função calcular eu num entendi, porque já havia colocado o campo para onde vai a idade.

0 mais

 Validar data de Nascimento e mostrar idade em javascript
Por web 15115 post(s) Offline ADMIN  Masculino 3337p em Sex Out 12, 2012 5:05 pm
Faz essas alterações aqui

No input txt_idade deixa o onblur assim

Selecionar - Numerar
onblur="validarData(document.form.txt_idade);calcular()"

No script, onde tem essas linhas

Selecionar - Numerar
document.getElementById('calcular').disabled=false;
calcular();

Tira essa linha

Selecionar - Numerar
document.getElementById('calcular').disabled=false;

Porque você não vai usar. Tira todas igual a essa deixando somente o calcular()

0 mais

 Validar data de Nascimento e mostrar idade em javascript
Por kuster_01 8 post(s) Offline NOVO MEMBRO  Masculino 0p em Sex Out 12, 2012 5:17 pm
Muito obrigado; deu certo.
Mas se eu quiser que não aceite enviar o formulário sem preencher a data de nascimento? O que devo fazer?

0 mais

 Validar data de Nascimento e mostrar idade em javascript
Por web 15115 post(s) Offline ADMIN  Masculino 3337p em Sex Out 12, 2012 5:20 pm
Você tem que usar o mesmo esquema que eu fiz. Deixa o botão submit desabilitado. Ai você volta aquela linha baseado no id do submit

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

0 mais

 Validar data de Nascimento e mostrar idade em javascript
Por kuster_01 8 post(s) Offline NOVO MEMBRO  Masculino 0p em Sex Out 12, 2012 9:17 pm
Agora está validando tudo até o calculo da idade. Porém não está validando os checkbox nem o textarea. No textarea eu chamei a função como segue
Selecionar - Numerar
onblur="valida_end(this)"


Aí me dá a mensagem para inserir nome e sobrenome, porém se eu colocar

Selecionar - Numerar
onblur="valida_end2(this)"


para chamar o
Selecionar - Numerar
alert("Comente um pouco sobre você!");

aí passa direto sem validação.
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Fiz uma gambiarra que quase deu certo, mas fica com um incomodo de após fechar o primeiro alert, abre o segundo da validação dos checkbox.

fiz o seguinte:
Selecionar - Numerar
<form name="form" onsubmit=" return valida_end(this), valida_end2(this)" method="post" action=""> 


Mais um pouco e chego onde estou querendo.

0 mais

Resposta Rápida

   


 Busca Dinâmica

Clique em alguma palavra-chave para buscar, ou busque uma frase na caixa de pesquisa a seguir.

Palavras-chave: Validar data de Nascimento e mostrar idade em javascript





Próximo
Logar para Responder
Logar para Perguntar




Voltar para JavaScript, XML e jQuery

Quem está online

Usuários navegando neste fórum: Google [Bot] e 4 visitantes
CodigosnaWeb | CodigosnaWeb/forum | codigosnaweb [@] hotmail [.] com |
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group - Pousadas de Floripa
Traduzido por: Suporte phpBB