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

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 Qui Out 11, 2012 11:54 pm


kuster_01
8 post(s)
NOVO MEMBRO  Masculino 0p

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



0 mais

15 resposta(s)

 Validar data de Nascimento e mostrar idade em javascript em Sex Out 12, 2012 9:27 am

web
15350 post(s)
ADMIN  Masculino 3828p
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>


0 mais

 Validar data de Nascimento e mostrar idade em javascript em Sex Out 12, 2012 12:29 pm

kuster_01
8 post(s)
NOVO MEMBRO  Masculino 0p
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 em Sex Out 12, 2012 12:31 pm

web
15350 post(s)
ADMIN  Masculino 3828p
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 em Sex Out 12, 2012 3:09 pm

kuster_01
8 post(s)
NOVO MEMBRO  Masculino 0p
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 em Sex Out 12, 2012 3:21 pm

web
15350 post(s)
ADMIN  Masculino 3828p
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.

0 mais

 Validar data de Nascimento e mostrar idade em javascript em Sex Out 12, 2012 3:28 pm

kuster_01
8 post(s)
NOVO MEMBRO  Masculino 0p
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 em Sex Out 12, 2012 3:31 pm

web
15350 post(s)
ADMIN  Masculino 3828p
;)

0 mais

 Validar data de Nascimento e mostrar idade em javascript em Sex Out 12, 2012 4:25 pm

kuster_01
8 post(s)
NOVO MEMBRO  Masculino 0p
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> 


0 mais

 Validar data de Nascimento e mostrar idade em javascript em Sex Out 12, 2012 4:46 pm

web
15350 post(s)
ADMIN  Masculino 3828p
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));

0 mais

 Validar data de Nascimento e mostrar idade em javascript em Sex Out 12, 2012 4:57 pm

kuster_01
8 post(s)
NOVO MEMBRO  Masculino 0p
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 em Sex Out 12, 2012 5:05 pm

web
15350 post(s)
ADMIN  Masculino 3828p
Faz essas alterações aqui

No input txt_idade deixa o onblur assim

Selecionar   Numerar   Testar HTML   Testar PHP   Testar MySQL   Como Funciona
onblur="validarData(document.form.txt_idade);calcular()"

No script, onde tem essas linhas

Selecionar   Numerar   Testar HTML   Testar PHP   Testar MySQL   Como Funciona
document.getElementById('calcular').disabled=false;
calcular();

Tira essa linha

Selecionar   Numerar   Testar HTML   Testar PHP   Testar MySQL   Como Funciona
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 em Sex Out 12, 2012 5:17 pm

kuster_01
8 post(s)
NOVO MEMBRO  Masculino 0p
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 em Sex Out 12, 2012 5:20 pm

web
15350 post(s)
ADMIN  Masculino 3828p
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 em Sex Out 12, 2012 9:17 pm

kuster_01
8 post(s)
NOVO MEMBRO  Masculino 0p
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   Testar HTML   Testar PHP   Testar MySQL   Como Funciona
onblur="valida_end(this)"


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

Selecionar   Numerar   Testar HTML   Testar PHP   Testar MySQL   Como Funciona
onblur="valida_end2(this)"


para chamar o
Selecionar   Numerar   Testar HTML   Testar PHP   Testar MySQL   Como Funciona
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   Testar HTML   Testar PHP   Testar MySQL   Como Funciona
<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.

Validar data de Nascimento e mostrar idade em javascript



Próximo

Logar para Responder
Logar para Perguntar




Voltar para JavaScript, XML e jQuery

CodigosnaWeb   CodigosnaWeb/forum   codigosnaweb HOTMAIL