Validar data de Nascimento e mostrar idade em javascript - Fórum CodigosnaWeb.com
Você recebeu uma nova MP, clique aqui


Validar data de Nascimento e mostrar idade em javascript

Assista vídeos sobre Validar data de Nascimento e mostrar idade em javascript • Busque diretamente no Youtube

Fórum sobre: JavaScript, XML, AJAX e jQuery

Moderador: web

Logar para Responder
Logar para Perguntar

 Validar data de Nascimento e mostrar idade em javascript em 12 Out 2012 00:54

Usuário offline kuster_01
8 post(s)
NOVO MEMBRO  Masculino
0 ponto(s)

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

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



mais 0

15 resposta(s)

 Validar data de Nascimento e mostrar idade em javascript em 12 Out 2012 10:27
Usuário online web
15434 post(s)
ADMIN  Masculino
5211 ponto(s)
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   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>


mais 0


 Validar data de Nascimento e mostrar idade em javascript em 12 Out 2012 13:29
Usuário offline kuster_01
8 post(s)
NOVO MEMBRO  Masculino
0 ponto(s)
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.


mais 0


 Validar data de Nascimento e mostrar idade em javascript em 12 Out 2012 13:31
Usuário online web
15434 post(s)
ADMIN  Masculino
5211 ponto(s)
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) {


mais 0


 Validar data de Nascimento e mostrar idade em javascript em 12 Out 2012 16:09
Usuário offline kuster_01
8 post(s)
NOVO MEMBRO  Masculino
0 ponto(s)
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.


mais 0


 Validar data de Nascimento e mostrar idade em javascript em 12 Out 2012 16:21
Usuário online web
15434 post(s)
ADMIN  Masculino
5211 ponto(s)
Isso é bem simples. No script, você encontra essa linha

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

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


mais 0


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


mais 0


 Validar data de Nascimento e mostrar idade em javascript em 12 Out 2012 16:31
Usuário online web
15434 post(s)
ADMIN  Masculino
5211 ponto(s)
;)


mais 0


 Validar data de Nascimento e mostrar idade em javascript em 12 Out 2012 17:25
Usuário offline kuster_01
8 post(s)
NOVO MEMBRO  Masculino
0 ponto(s)
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   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> 


mais 0


 Validar data de Nascimento e mostrar idade em javascript em 12 Out 2012 17:46
Usuário online web
15434 post(s)
ADMIN  Masculino
5211 ponto(s)
Tem vários erros no seu código.

Primeiro, tem 2 forms

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

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


mais 0



 Busca Dinâmica

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

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 5 visitantes

Servidores dedicados a R$450,00/Mensais

Ler o feed    Assinar o feed    CodigosnaWeb    CodigosnaWeb/forum    codigosnaweb HOTMAIL    Pousadas de Floripa