2

Veréis, tengo que programar el siguiente programa:

  • El usuario me introduce una fecha por un input type="text" y a raíz de esa fecha, tengo que validar si corresponde al formato de fecha "dd/mm/aaaa", si corresponde a este formato, imprimir "fecha correcta", si no, "fecha incorrecta".

Por el momento tengo esto, ¿alguien puede echarme una mano?

<!DOCTYPE html>
<html>
    <head>
        <title>Pràctica 17</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h1>Pràctica 16</h1>
            <p>Introdueix una data:</p>
                <input type="text" id="dateParameter" />
            <button onclick="validacioData()">Valida!</button>
            <script>
                function validacioData() {
                    var sentDate = document.getElementById("dateParameter");
                    var dateArray = sentDate.split('/');
                    document.write (sentDate);

                    var day = parseInt(dateArray[0]);
                    var month = parseInt(dateArray[1]);
                    var year = parseInt(dateArray[2]);

                    var dataObject = new Date(year, month - 1, day);

                    if (dataObject.getFullYear() === year && dataObject.getMonth() === month && dataObject.getDate() === day) {
                        alert ("La data és del format correcte.");
                    }
                    else {
                        alert ("La data és del format incorrecte.");
                    }
                }
                window.onload = validacioData;
            </script>
    </body>
</html>

El resultado obtenido de la consola al ejecutar el código, escribir la fecha y hacer click en el icono de "Valida!", es el siguiente: introducir la descripción de la imagen aquí

2

3 respuestas 3

2

Te recomiendo utilizar RegEx para solucionar tu problema, es la forma más fácil de validar cadenas de caracteres que contienen algún patrón.

Antes de proponerte mi solución te haré unos comentarios sobre el código base que tenías:

15                    var sentDate = document.getElementById("dateParameter");

En esta línea estás obteniendo un elemento del DOM, no su contenido, si haces un console.log de esto verás que te mostrará el conjunto de etiquetas HTML por el cual está compuesto, más no el valor textual de este.

17                     document.write (sentDate);

En esta línea cada vez que ejecutabas la función de validación sobreescribías todo el HTML, con lo que perdías toda la interfaz que habías construido, no veo la utilidad de esta función de momento.

La estrategia que utilizabas de la línea 15 - 31 generaba fallos de ejecución en caso de que la cadena de fecha inicial no tuviese siquiera los caracteres '/' dentro de la cadena. No estás contemplando todos las posibles entradas que un usuario pudiese insertar.

32                window.onload = validacioData;

Esta línea causa la ejecución inmediata de la función de validación una vez cargue la ventana y al no existir información al principio saltará de inmediato la alerta al usuario de que su entrada no es válida, por eso esta línea no debería existir.

A continuación te muestro mi propuesta, las facilidades del RegEx son que permiten validar únicamente un patrón específico de datos y en caso de no encontrarlo simplemente no fallará. La estrategia aquí es utilizar la función match que actúa sobre strings la cual recibe un patrón de RegEx, si no conoces sobre RegEx te recomiendo esta lectura. Una buena herramienta para practicarlo es esta. Una vez ejecutada la función match esta dará un arreglo con los elementos que cumplen el patrón, si la cadena no cumple con el patrón especificado retornará null, lo cual sirve como un false en operaciones booleanas, con esto mi propuesta quedaría así:

<!DOCTYPE html>
<html>
  <head>
    <title>Pràctica 17</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <h1>Pràctica 16</h1>
    <p>Introdueix una data:</p>
    <input type="text" id="dateParameter" />
    <button onclick="validacioData()">Valida!</button>
    <script>
      function validacioData() {
        var sentDate = document.getElementById("dateParameter").value;
        var isValid = sentDate.match(/^([0-2][0-9]|(3)[0-1])(\/)(((0)[0-9])|((1)[0-2]))(\/)\d{4}$/);

        if (isValid) {
          alert("La data és del format correcte.");
        } else {
          alert("La data és del format incorrecte.");
        }
      }
    </script>
  </body>
</html>

1

Aporto una respuesta en la cual no empleo expresiones regulares (aunque es claro que la considero una mejor opción) como la que se indica en el duplicado

  • Recibo en una variable la fecha ingresada por el usuario en el input
  • Transformo el string recibido a un vector con ayuda de split
  • cada parte del vector nuevo verifico si encaja en los parámetros de rangos para días, meses y años
  • Como necesitamos un solo formato de fecha dd/mm/aaaa entonces hacemos uso del operador && para indicar que todas las condiciones deben de cumplirse
  • Si la fecha ingresada y cada una de sus partes no encaja en los rangos dados entonces le indicamos al usuario que su fecha es inválida

Código

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo</title>
    </head>
    <body>
     <h3></h3>
    <input type="text" id="fecha">
    <button id="valida">Validar</button>  
    <script>
    let fecha = document.getElementById("fecha")
    let boton = document.getElementById("valida")
    
    
    boton.addEventListener("click", () => {
      let partes = fecha.value.split("/")
      console.log(partes[0])
      if(partes[0] <= 31 && partes[0] > 0 && partes[1] <= 12 && partes[1] > 0 && partes[2] <= 10000 && partes[2] >= 1970) {
        document.querySelector("h3").innerHTML = "Tu fecha es válida"
      }else{
        document.querySelector("h3").innerHTML = "Tu fecha es inválida"
      }
    })
    </script>
    </body>
    </html>

5
  • 1
    Hola @Marcos de hecho la revise y por eso mi comentario al inicio de mi aporte que consideraba que con expresiones regulares es mejor, por eso le he dado mi +1 a Mariano, solo como también comenté me arriesgue a colocar un aporte que consideraba en algo útil
    – user128299
    Commented el 19 oct. 2019 a las 18:44
  • La partes[2], ¿debería ser <= o < a 10000? ¿porque tiene que ser >= a 1970?
    – Marcos
    Commented el 19 oct. 2019 a las 18:47
  • si @Marcos pudiera ser solo tenía en la mente como referencia 1970 pues estaba terminando una tarea que involucraba ese dato, pero por supuesto de hecho puse esos valores solo para componer un ejemplo, esto era lo que leía es.wikipedia.org/wiki/Tiempo_Unix
    – user128299
    Commented el 19 oct. 2019 a las 18:49
  • Muchas gracias a los dos, de verdad, sois unos cracks!!! ¡Ahora edito mi post con la solución final (he modificado un poco el regexp)! Saludos ;) Commented el 19 oct. 2019 a las 19:15
  • @AlexIglesias no coloques la solución en tu pregunta, en su lugar publicala como respuesta y marcarla como aceptada, de modo que sepamos que tu aporte es la solución
    – user128299
    Commented el 19 oct. 2019 a las 19:17
0

SOLUCIÓN:

<!DOCTYPE html>
<html>
    <head>
        <title>Pràctica 17</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>

  <body>

    <h1>Pràctica 16</h1>
        <p>Introdueix una data:</p>
            <input type="text" id="dateParameter" />
            <button onclick="validacioData()">Valida!</button>

    <script>
        function validacioData() {
            // Recuperem la data enviada.
            var sentDate = document.getElementById("dateParameter").value;

            // Creem el patrò "dd/mm/aaaa" que es compararà amb la data enviada per l'usuari.
            var isValid = sentDate.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);

            // Si "isValid" te un valor vol dir que la data es la correcta.
            if (isValid) {
              alert("La data és del format correcte.");
            }
            else {
              alert("La data és del format incorrecte.");
            }
        }
    </script>

  </body>
</html>
2
  • Una explicación de que modificaste le vendría bien a tu respuesta, aunque creo que solo válidas la cantidad de números por posición
    – user128299
    Commented el 19 oct. 2019 a las 19:21
  • Lo modifiqué porqué no acentué correctamente una palabra, xD. Commented el 20 oct. 2019 a las 18:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.