BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Comprobar que una fecha existe usando jQuery Validate

16/MAY/2013 20.224 visitas Ver comentarios
Comprobar que una fecha existe usando jQuery Validate

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Siguiendo con mis anteriores post donde hablo de jQuery Validate, esta vez me ha tocado verificar que la fecha ingresada en un campo de texto de mi formulario sea correcta.

Qué quiere decir que una fecha sea correcta... pues que exista. jQuery Validate tiene una opción para validar fechas y otra que llama dateISO, pero según mis pruebas, el primer caso (DATE), sólo verifica que ingreses un número (he probado a poner un 33 y el validador ha pasado de largo)... y el segundo, si bien valida el formato de una fecha (dd-mm-yyyy o yyyy-mm-dd) no verifica que la fecha exista, por lo que si pones 33-33-3333 te deja pasar porque el formato es correcto.

Sin más introducciones, nos metemos de lleno a crear un nuevo método de validación. No hay mucho que explicar, en la documentación de jQuery Validate te explica que este potente plugin permite la creación de métodos propios para validar prácticamente todo, así que a eso vamos.

La idea es tomar el valor ingresado en un campo de texto (en un futuro, podrá usarse el campo de tipo DATE de HTML5 pero no creo que sea el momento) y controlar que el formato y números ingresados se corresponden con los de una fecha normal.

Para ello, vamos a cortar el valor por el caracter especial GUION (-), sabiendo que los primeros 2 números deben corresponderse con el día, los 2 siguientes con el mes y los 4 restantes con el año. Si no se cumplen estas condiciones, el plugin ya se ocupará de darnos un bonito mensaje de error.

Pero si todo es correcto, nos toca formar esa fecha y comprobar que sea válida, para ellos verificaremos que el día esté incluido entre 01 y 31 (teniendo en cuenta, lógicamente, los 28 y 29 de febrero y febrero bisiestos) y controlando, además, si el mes en cuestión puede tener 30 o 31 días.

Luego de eso verificaremos que el mes esté comprendido entre 01 y 12 y para el año ya no nos queda comprobación por hacer porque cualquier año sería válido. Si quisieras que el año fuese menor al actual, podría agregarse esa condición fácilmente.

Por último, me queda destacar, que he personalizado los mensajes de cada error para ir informando al usuario donde se está equivocando al poner la fecha, tal que si el error es general, mostrará el mensaje por defecto que le he asignado al campo, pero si el error es específico de días o meses (o incluso del mes bisiesto), el plugin mostrará el correspondiente mensaje de error.

Nada más, te dejo una demo funcional en el botón superior, no olvides enlazar jQuery y jQuery Validate y copiar y pegar el código que aparece a continuación. Que lo disfrutes!

Código 1 - HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
Código 2 - HTML
<form class="validacion" action="" method="post">
<fieldset>
<p><label>Fecha*</label><input type="text" class="fechaESP" maxlength="10" minlength="10" name="nombre" value=""> (formato: 23-05-2013)</p>
</fieldset>
<p><input type="submit" value="VERIFICAR" class="submit"></p>
</form>
Código 3 - JAVASCRIPT
$(document).ready(function()
	{
		$(".validacion").validate();
		jQuery.validator.addMethod("fechaESP", function( value, element) 
		{
			var validator = this;
			var datePat = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/;
			var fechaCompleta = value.match(datePat);
			if (fechaCompleta == null) {
				$.validator.messages.fechaESP = "OLA K ASE, ESA FECHA NO ES VALIDA O K ASE?";
				return false;
			}

			dia = fechaCompleta[1];
			mes = fechaCompleta[3];
			anio = fechaCompleta[5];

			if (dia < 1 || dia > 31) {
				$.validator.messages.fechaESP = "El valor del día debe estar comprendido entre 1 y 31.";
				return false;
			}
			if (mes < 1 || mes > 12) { 
				$.validator.messages.fechaESP = "El valor del mes debe estar comprendido entre 1 y 12.";
				return false;
			}
			if ((mes==4 || mes==6 || mes==9 || mes==11) && dia==31) {
				$.validator.messages.fechaESP = "El mes "+mes+" no tiene 31 días!";
				return false;
			}
			if (mes == 2) { // bisiesto
				var bisiesto = (anio % 4 == 0 && (anio % 100 != 0 || anio % 400 == 0));
				if (dia > 29 || (dia==29 && !bisiesto)) {
					$.validator.messages.fechaESP = "Febrero del " + anio + " no contiene " + dia + " dias!";
					return false;
				}
			}
			return true;
		}, "OLA K ASE, ESA FECHA NO ES VALIDA O K ASE?");
	});

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018