Fórum sobre: JavaScript, XML, AJAX e jQuery
Moderador: web
0
15 resposta(s)
web
15350 post(s)
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
kuster_01
8 post(s)
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
web
15350 post(s)
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
kuster_01
8 post(s)
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
web
15350 post(s)
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
kuster_01
8 post(s)
0p |
Muito obrigado, agora deu certo.
Agora vou tentar adaptar ao meu formulário esta função.
|
0
0
kuster_01
8 post(s)
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
0
kuster_01
8 post(s)
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
0
kuster_01
8 post(s)
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
web
15350 post(s)
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
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
Voltar para JavaScript, XML e jQuery
|
|
|
