Validación de fecha en input date

En este tutorial veremos cómo validar una fecha introducida en un campo input de tipo fecha con jQuery.

Validación de la fecha

Los campos de tipo fecha permiten seleccionar una fecha con el ratón pero también escribirla manualmente. El problema cuando se introduce manualmente es que es posible cometer errores, sobre todo al introducir el año. Podemos escribir «2023», «23», «223», o cualquier otro número.

Cuándo esto sucede y obtenemos el valor del campo con javascript, necesitamos validar que esa fecha introducida es correcta.

Para solucionarlo podemos usar el siguiente método

<!-- Campo de tipo fecha -->
<input type="date" class="example-date-field"/>
<script>
    // Evento de validación de fecha. Al obtener la fecha con $(".example-date-field").val() el formato será: Año con 4 dígitos, Mes con 2 dígitos y Día con 2 dígitos. Si en el año ponemos 23 en vez de 2023, se obtiene 0023
    $(".example-date-field").focusout(function(){
        if(dateExists($(this).val())){
            alert("Fecha correcta");
        }
        else{
            alert("Fecha incorrecta");
        }
    });

    // Método para validar la fecha
    function dateExists(fecha){
        // Se separa la fecha en día, mes y año
        var fechaf = fecha.split("-");
        var d = Number(fechaf[2]);
        var m = Number(fechaf[1]);
        var y = Number(fechaf[0]);
        return m > 0 && m < 13 && y > 1900 && y < 3000 && d > 0 && d <= (new Date(y, m, 0)).getDate();
    }
</script>

Más tutoriales de jQuery

Si te ha gustado no olvides compartir en redes sociales.

[addthis tool=»addthis_inline_share_toolbox_6jt6″]

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo