JavaScript - Validar fecha completa

 
Vista:
sin imagen de perfil

Validar fecha completa

Publicado por Zendi (90 intervenciones) el 02/09/2023 18:59:28
Tengo una función para validar una fecha de nacimiento donde el usuario debe escribir la fecha completa ejemplo: 04/11/2023 pero hay usuarios que la escriben así: 04/11/23, y la idea es que la aplicación lo obligue a que sea completa.
Aquí está la función, el problema creo que radica en la expresión regular
¿Qué ayuda podrían dar?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function validate_fecha(fecha)
{
    var patron=new RegExp("^([0-9]{1,2})([/])([0-9]{1,2})([/])(19|20)+([0-9]{2})$");
	alert(patron);
    if(fecha.search(patron)==0)
    { alert("hola3");
        var values=fecha.split("/");
        if(isValidDate(values[0],values[1],values[2]))
        {
        	alert("hola4");
            return true;
        }
    }
	//alert("hola5");
    return false;
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil

Validar fecha completa

Publicado por Zendi (90 intervenciones) el 03/09/2023 09:59:30
Buenas a todos podría alguien darme una sugerencia? Ya la he probado con 4 en la parte del año ....{4} pero no lo hace.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Validar fecha completa

Publicado por Zendi (90 intervenciones) el 03/09/2023 15:30:02
Este campo fecha es para calcular la fecha de nacimiento, eso ya lo calcula ahora la idea es validar que escriba el año completo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Validar fecha completa

Publicado por Zendi (90 intervenciones) el 04/09/2023 11:40:25
Podría alguien darme una sugerencia?
Y disculpen la molestia e insistencia. También estoy buscando la solución.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alejandro
Val: 1.448
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Validar fecha completa

Publicado por Alejandro (532 intervenciones) el 05/09/2023 17:08:15
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
A mi me va con esto, obvio tienes que validar mes y día porque 30/02/2023 no es una fecha válida pero cumple el patrón.
1
^[0-9]{1,2}\/[0-9]{1,2}\/[19|20]+[0-9]{2}$
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Validar fecha completa

Publicado por Zendi (90 intervenciones) el 05/09/2023 21:01:01
Gracias por tu respuesta. Claro cumple el patrón pero el asunto es obligar al usuario a escribir el año completo con los 4 dígitos, muchos optan por escribir esto: 01/09/23, cuando debe ser 01/09/2023. Porque la base de datos no acepta está cadena 01/09/23 sino completa.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alejandro
Val: 1.448
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Validar fecha completa

Publicado por Alejandro (532 intervenciones) el 05/09/2023 21:48:37
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
Con la expresión que te pase 01/09/23 no cumple el patrón.
1
2
3
4
5
if( '01/09/23'.match(/^[0-9]{1,2}\/[0-9]{1,2}\/[19|20]+[0-9]{2}$/) ){
    console.log('cumple')
}else{
    console.log('no cumple')
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Validar fecha completa

Publicado por Zendi (90 intervenciones) el 05/09/2023 22:03:40
Ok. Alejandro lo voy a implementar y te aviso. Gracias amigo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Validar fecha completa

Publicado por Zendi (90 intervenciones) el 08/09/2023 02:24:37
Hola Alejandro el código que me enviaste no funcionó.
Aquí estoy enviando mi código más la sugerencia que me diste. Allí está la función que calcula la fecha de nacimiento y la etiqueta donde la llamo. La estoy invocando con onchange.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
function validate_fecha(fecha)
{
 
    var patron=new RegExp("^([0-9]{1,2})([/])([0-9]{1,2})([/])(19|20)+([0-9]{2})$");
 
    if(fecha.match(patron))
    {
    	console.log('cumple');
    }else{
    	console.log('no cumple');
    }
 
        // var values=fecha.split("/");
        // if(isValidDate(values[0],values[1],values[2]))
        // {//alert("hola4");
        //     return true;
        // }
    }
 
function calcular_edad()
{
 var form = document.getElementById('fecha_nac').value; //fecha de nacimiento en el formulario
 var fechaNacimiento = form.split("/");
 var dia = fechaNacimiento[0];
 var mes = fechaNacimiento[1];
 var ano = fechaNacimiento[2];
 var fechaHoy = new Date(); // detecto la fecha actual y asigno el dia, mes y anno a variables distintas
 var ahora_ano = fechaHoy.getFullYear();
 var ahora_mes = fechaHoy.getMonth()+1;
 var ahora_dia = fechaHoy.getDate(); // realizamos el calculo
 var edad = (ahora_ano) - ano;
    if ( ahora_mes < mes )
      {
       edad--;
   	  }
	if (mes == ahora_mes && ahora_dia < dia){
	   edad--;
/////
		dias = dia - ahora_dia;
		///alert(dias);
	   }
	    if (dia > ahora_dia)
		{
		  dias = dia - ahora_dia
		}
		  if (ahora_dia == dia)
		{
		   dias = 0;
		}
		   if (dia < ahora_dia)
		   {
		     dias = ahora_dia - dia
		   }
/////
	   if (edad > 1900)
	   {
	   edad -= 1900;
	   }
	   var meses=0;
	   if(ahora_mes>mes)
	     meses=ahora_mes-mes;
		 if(ahora_mes<mes)
		 meses=12-(mes-ahora_mes);
           // calculamos los dias
 
				var dias=0;
				if(ahora_dia>dia) {
				    dias=ahora_dia-dia;
					}
					if(ahora_dia<dia)
					{
					ultimoDiaMes=new Date(ahora_ano, ahora_mes, 0);
					console.log(ultimoDiaMes.getDate());
					dias=ultimoDiaMes.getDate()-(dia-ahora_dia);
					}
    document.getElementById('edad').value = edad;
    document.getElementById('meses').value = meses;
    document.getElementById('dias').value = dias;
  }
 
		<td>
		<input type="text" size=10 maxlength=10 name="fecha_nac" onblur="calcular_edad();" id="fecha_nac" onkeyup="mascara(this,'/',patron,true)" class="color1"
		onchange="validate_fecha(this.value)">
		<input type="text" size="2" maxlength="2" id="edad" name="anios" readonly="t" class="color1">
		<input type="text" size="2" maxlength="2" id="meses" name="meses" readonly="t" class="color1">
		<input type="text" size="2" maxlength="2" id="dias" name="dias" readonly="t" class="color1">
		</td>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alejandro
Val: 1.448
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Validar fecha completa

Publicado por Alejandro (532 intervenciones) el 08/09/2023 17:38:37
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
No te equivoques, lo que no funciona es el programador.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
	input:invalid{
		border:solid 1px red;
	}
</style>
<input type="text" id="fecha_nac" maxlength="10" />
<script>
	document.getElementById('fecha_nac').addEventListener('blur', function(){
		if( this.value.match(/^[0-9]{1,2}\/[0-9]{1,2}\/[19|20]+[0-9]{2}$/) ){
			//console.log('cumple');
			this.setCustomValidity("");
		}else{
			//console.log('no cumple');
			this.setCustomValidity("Fecha invalida");
		}
	});
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Validar fecha completa

Publicado por Zendi (90 intervenciones) el 08/09/2023 20:02:28
Bueno no es que no funcione sino que en javascript estoy aprendiendo más código. Gracias Alejandro.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Validar fecha completa

Publicado por Zendi (90 intervenciones) el 09/09/2023 18:03:43
Hola Alejandro apliqué el código que me sugieres pero solo refleja la acción del estilo y colorea el input en color rojo. No da el mensaje del javascript cuando la fecha es incorrecta.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  .sr {
    background-color: #FFFFCF;
    color: #FF35BG;
    font-family: Arial;
    font-size: 12px;
  }
  input.color1 {background-color: #00CC99; font-weight: bold; font-size: 12px; color: #CG0297;}
 
input:invalid{
	border:solid 1px red;
}
 
</style>
 
 
 
<SCRIPT type="text/javascript">
 
 
var patron = new Array(2,2,4)
var patron2 = new Array(1,3,3,3,3)
function mascara(d,sep,patron,nums)
{
if(d.valant != d.value){
	val = d.value
	largo = val.length
	val = val.split(sep)
	val2 = ''
	for(r=0;r<val.length;r++){
		val2 += val[r]
	}
	if(nums){
		for(z=0;z<val2.length;z++){
		  if(isNaN(val2.charAt(z))){
			letra = new RegExp(val2.charAt(z),"g")
			val2 = val2.replace(letra,"")
		   }
		}
	}
	val = ''
	val3 = new Array()
	for(s=0; s<patron.length; s++){
		val3[s] = val2.substring(0,patron[s])
		val2 = val2.substr(patron[s])
	}
	for(q=0;q<val3.length; q++){
		if(q ==0){
			val = val3[q]
		}
		else{
			if(val3[q] != ""){
				val += sep + val3[q]
			}
		}
	}
	d.value = val
	d.valant = val
	}
}
function calcular_edad()
{
 var form = document.getElementById('fecha_nac').value; //fecha de nacimiento en el formulario
 var fechaNacimiento = form.split("/");
 var dia = fechaNacimiento[0];
 var mes = fechaNacimiento[1];
 var ano = fechaNacimiento[2];
 var fechaHoy = new Date(); // detecto la fecha actual y asigno el dia, mes y anno a variables distintas
 var ahora_ano = fechaHoy.getFullYear();
 var ahora_mes = fechaHoy.getMonth()+1;
 var ahora_dia = fechaHoy.getDate(); // realizamos el calculo
 var edad = (ahora_ano) - ano;
    if ( ahora_mes < mes )
      {
       edad--;
   	  }
	if (mes == ahora_mes && ahora_dia < dia){
	   edad--;
/////
		dias = dia - ahora_dia;
		///alert(dias);
	   }
	    if (dia > ahora_dia)
		{
		  dias = dia - ahora_dia
		}
		  if (ahora_dia == dia)
		{
		   dias = 0;
		}
		   if (dia < ahora_dia)
		   {
		     dias = ahora_dia - dia
		   }
/////
	   if (edad > 1900)
	   {
	   edad -= 1900;
	   }
	   var meses=0;
	   if(ahora_mes>mes)
	     meses=ahora_mes-mes;
		 if(ahora_mes<mes)
		 meses=12-(mes-ahora_mes);
           // calculamos los dias
 
				var dias=0;
				if(ahora_dia>dia) {
				    dias=ahora_dia-dia;
					}
					if(ahora_dia<dia)
					{
					ultimoDiaMes=new Date(ahora_ano, ahora_mes, 0);
					console.log(ultimoDiaMes.getDate());
					dias=ultimoDiaMes.getDate()-(dia-ahora_dia);
					}
    document.getElementById('edad').value = edad;
    document.getElementById('meses').value = meses;
    document.getElementById('dias').value = dias;
  }
 
 
</script>
<script type="text/javascript" language="javascript" src="js/funciones.js"></script>
<title>Pacientes</title>
</head>
<body onload="limpiar()">
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;">
</div>
<form action="cargapacientes.php" method="POST" name="form1">
	<?php
		error_reporting(E_ALL ^ E_WARNING ^ E_NOTICE);
		$connect = pg_connect("host=localhost port=5432 dbname=pediatria user=postgres password=Wrap*/1808");
		$sql="select * from estado order by nombre asc";
		$res=@pg_query($connect,$sql);
?>
	<tr>
		<td class="sr" align='right' style="text-decoration:none">
			Fecha de Nac. del Ni&ntilde;o/a:
		</td>
		<td>
			<input type="text" size=10 maxlength=10 name="fecha_nac" onblur="calcular_edad();" id='fecha_nac' class="color1" onkeyup="mascara(this,'/',patron,true)">
 
			<script type="text/javascript">
						document.getElementById('fecha_nac').addEventListener('blur',function(){
						if(this.value.match("/^[0-9]{1,2}[0-9]{1,2}[19|20]+[0-9]{4}$"))
						{
								this.setCustomValidity("");
							}else{
								this.setCustomValidity("Fecha invalida");
							}
						})
			</script>
 
			<input type="text" size="2" maxlength="2" id="edad" name="anios" readonly="t" class="color1">
			<input type="text" size="2" maxlength="2" id="meses" name="meses" readonly="t" class="color1">
			<input type="text" size="2" maxlength="2" id="dias" name="dias" readonly="t" class="color1">
		</td>
	</tr>
	<table align="center">
	<tr>
		<td>
			<input class="color1" type="submit" name="action" value="Guardar" title="SOLICITAR LA CITA">
			<input class="color1" type="reset" value="Deshacer">
		</td>
	</tr>
	</table>
</form>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alejandro
Val: 1.448
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Validar fecha completa

Publicado por Alejandro (532 intervenciones) el 10/09/2023 19:37:09
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
El mensaje aparece cuando pones el puntero encima del campo invalido. Ya de ahí haces las modificaciones de tu preferencia, como agregar un simple alert.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Validar fecha completa

Publicado por Zendi (90 intervenciones) el 10/09/2023 22:35:50
Correcto!!!! También la idea sería buena si le obligo con un set Focus después del mensaje.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Validar fecha completa

Publicado por Zendi (90 intervenciones) el 10/09/2023 23:14:45
Estoy usando esta función:
1
2
3
function setFocusToTextBox(){
      document.getElementById("fecha_nac").Focus();
}
Pero no lo está enfocando al input. Qué ves que ande mal en la función?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar