0

de que manera puedo realizar las siguientes validaciones o restricciones en mi siguiente formulario:

index.php

Dentro de mi index.php tengo un formulario que trae desde base de datos fecha de inicio y hora de inicio ya registradas.

Adicional tengo dentro de ese mismo formulario otros dos input que permiten ingresar fecha final y hora final

<form action="insertar.php" method="POST">          


Hora Inicio:
<input type="time" id="horainicio" name="horainicio" value="<?php echo $datosone['horainicio']?>"/>

Fecha de Inicio:
<input type="text" id="fechainicio" name="fechainicio" value="<?php echo $datosone['fechainicio']?>"/>


<br>
Hora Final:
<input type="time" id="horafinal" name="horafinal" required />

Fecha Final:
<input type="text" id="fechafin" name="fechafin" required />

<input type="submit" value="GUARDAR"/>  
</form>

Lo que estoy buscando hacer es que si selecciono una fecha y hora menor a la fecha y hora inicial no me deje avanzar para registrar los datos.

De que manera podría hacerlo? es necesario que deba unificar la fecha iniciar y hora inicial igual con la fecha y hora final? o se puede validar desde el mismo formulario?

No tengo mucha idea de como podría hacerlo.

Cualquier ayuda me podría ser de gran utilidad muchas gracias amigos.

2 respuestas 2

2

Esto te puede ayudar, agregando onsubmit al formulario esperas a que te devuelva "true" para continuar. Para la validacion puedes unir la hora y fecha y compararlas, si la fechahorainicial es mayor retornas "false". Quité algunas cosas para que esté mas limpio, puedes poner required donde quieras que sea obligatorio, y obtener la fecha hora inicial de una bd.

<html>

<head>
<script>
function validateForm() {
  var horai =  document.getElementById("horainicio").value;
  var horaf = document.getElementById("horafinal").value;
  var fechai = document.getElementById("fechainicio").value;
  var fechaf = document.getElementById("fechafin").value

  var k = new Date(fechai+" "+horai);
  var l = new Date(fechaf+" "+horaf);

  if (k>l) {
    return false;
  }
} 
</script> 
</head>
</body>

<form action="/action_page.php" onsubmit="return validateForm()"  method="POST">          


Hora Inicio:
<input type="time" id="horainicio" name="horainicio" value=""/>

Fecha de Inicio:
<input type="date" id="fechainicio" name="fechainicio" value="a" />


<br>
Hora Final:
<input type="time" id="horafinal" name="horafinal" />

Fecha Final:
<input type="date" id="fechafin" 
name="fechafin" />

<input type="submit" value="GUARDAR"/>  
</form>

</body>
</html>
3
  • Hola Angel, lo unico que no entiendo es que en el form action="/action_page.php" esta eso, lo reemplazo por mi insertar.php cierto? y le dejo el / o lo quito? por otro lado la fecha final y hora final no pueden ser nunca menor que la fecha y hora de inicio.
    – estrada
    Commented el 28 jul. 2020 a las 21:31
  • Ya logre implementarlo en mi codigo y funciona perfecto como lo estaba buscando hacer muchas gracias.
    – estrada
    Commented el 28 jul. 2020 a las 21:34
  • Si, ahi va el php tuyo, las fechahora estan en las variables k(inicial), l(final), cada una contiene la fecha y hora correspondiente que las uní para comparar fecha y hora a la vez . Así como está "k>l" la fechahorainicial siempre debe ser mayor para continuar, si también pueden ser iguales es con ">=".
    – Ange Reyna
    Commented el 28 jul. 2020 a las 21:43
1

Aqui hay un ejemplo de como validar rangos de horas. Al formulario form le he asignado un ID y he agregado un botón para validar antes de enviar el formulario. Cuando el input type="time" no tiene datos o esta incompleto devuelve siempre una cadena vacia. Despues se reemplaza la hora ejemplo 12:00 eliminado el ":" para convertirlo a tipo entero y quedaria un numero comparable ejemplo 1200 entonces puedes comparar numericamente si la primer hora es menor o mayor. Si todo esta bien se llama al submit() del formulario para que este envie los datos al servidor.

HTML CODE:

 <form action="insertar.php" method="POST" id="form1">
                     <input type="time" id="horaInicio" name="horaInicio" required /><br>
                <input type="time" id="horafinal" name="horafinal" required /><br>
                <input type="button" value="boton" id="btn1"/>
     </form>

JS CODE:

    var btn = document.getElementById("btn1");
    btn.addEventListener("click", function () {
        var hinicio = document.getElementById("horaInicio").value;
        var hfinal = document.getElementById("horafinal").value;
        if (hinicio.length === 0 || hfinal.length === 0) {
            return;
        }

        var h1 = parseInt(hinicio.replace(":", ""), 10);
        var h2 = parseInt(hfinal.replace(":", ""), 10);
        if (h1 < h2) {
            document.getElementById("form1").submit();
        }

    });
0

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.