Tengo un pequeño problema con HTML5.

<input type="date" id="birthday" />

Quiero comprobar este campo en JavaScript.

Min. valor 01-01-1990.

No tengo idea de cómo analizar el objeto date y comprobar que es correcta.

Atributo min y max en HTML5 no está funcionando. Tengo que escribir de validación en JavaScript.

InformationsquelleAutor witek1902 | 2013-11-04

1 Comentario

  1. 1

    Puede utilizar un JavaScript de validación de la biblioteca, que utiliza la entrada de HTML5 atributos como min y max: por ejemplo jQuery Validación:

    <input id="mydate" name="mydate" type="date" min="2000-01-01" max="2010-31-12" required />
    
    <script>
        $("#mydate").validate();
    </script>

    Tener un aspecto como este violín para un ejemplo de trabajo: http://jsfiddle.net/a5Mvt/1/

    Además usted podría querer usar una biblioteca como Modernizr para comprobar la compatibilidad del navegador de input[type="date"] y el uso de un control de selector de fecha de jQuery UI o algo similar, si no es compatible.


    Actualización: Aquí una versión, que no utiliza jQuery o cualquier otro tipo de biblioteca:

    <input id="mydate" name="mydate" type="date" min="2000-01-01" max="2010-31-12" required />
    <span id="mydate_error" style="display:none;"></span>
    
    <script>
        var mydate = document.getElementById('mydate'),
            mydateError = document.getElementById('mydate_error');
    
        mydate.addEventListener('input', function() {
            if (!mydate.value.match(/\d{4}-\d{1,2}-\d{1,2}/)) {
                mydateError.innerHTML = 'Please specify a valid date in the form 1990-02-22';
                mydateError.style.display = 'inherit';
            } else {
                var value = new Date(mydate.value),
                    min = new Date(mydate.min),
                    max = new Date(mydate.max);
                if (value < min || value > max) {
                    mydateError.innerHTML = 'Date has to be between ' + min.toDateString() + ' and ' + max.toDateString();
                    mydateError.style.display = 'inherit';
                } else {
                    mydateError.style.display = 'none';
                }
            }
        });
    </script>

    Actualizado violín: http://jsfiddle.net/a5Mvt/2/

    • Lamentablemente no puedo usar el jQuery. Lo tengo todo escrito en JavaScript. Funciona todo excepto el campo. Link: iem.pw.edu.pl/~witkowr1/cwiczenie2/cwiczenie2.html tengo que hacer una verificación de inicio de sesión con la base de datos mediante Ajax, pero más tarde;)
    • Acabo de añadir una versión sin jQuery. Si necesita soporte para IE que usted puede necesitar para proporcionar una alternativa para addEventListener. Y, por supuesto, usted necesita para verificar la entrada en el servidor. Espero que esto ayude.
    • Muchas gracias 😉 poco Después de la modificación de todos los que trabajan bien. Lo siento por mi mal inglés, pero espero que usted entienda todo 🙂
    • Impresionante. Me alegro de que usted consiguió trabajo.
    • Su 31-12 orden es al revés. «Establecer el valor a una fecha válida cadena con el formato YYYY-MM-DD patrón definido en RFC3339.»

Dejar respuesta

Please enter your comment!
Please enter your name here