I have two input
with the class="timepicker"
to Boostrap
enter start time and end time.
$("#horaFin").change(function(){
$(".alert").remove();
var horaInicio = $("#horaInicio").val();
var horaFin = $("#horaFin").val();
if (horaFin <= horaInicio) {
$("#horaFin").parent().after('<div class="alert alert-warning">La hora de finalización debe ser mayor a la hora de inicio</div>');
$("#horaFin").val("");
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.css" rel="stylesheet"/>
<body>
<div class="bootstrap-timepicker">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
<input type="text" class="form-control input-lg timepicker" name="horaInicio" id="horaInicio" placeholder="Ingresar hora de inicio" autocomplete="off" required>
</div>
</div>
</div>
<div class="bootstrap-timepicker">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
<input type="text" class="form-control input-lg timepicker" name="horaFin" id="horaFin" placeholder="Ingresar hora de finalización" autocomplete="off" required>
</div>
</div>
</div>
<body>
The user cannot enter hours less than #horaInicio
en #horaFin
. For example:
Start: 21:00
End: 18:00
This action displays an alert and clears the content #horaFin
for the user to re-enter the time.
The only exception allowed would be when #horaInicio
it is less than or equal to 23:00 and #horaFin
is equal to 00:00
How can I perform that validation?
I solved it by creating this pre-validation: