I need to perform the validation of 2 inputs that are to choose a start time and an end time (24H format) and that are validated in real time, so that it warns the user before pressing the "save" button.
This is the idea, first validate that the start_date and end_date are the same, if so, validate the time, my idea is something similar to the pattern, I understand that you can use a custom message with CustomValidity.
if (input_Fecha_inicio === input_Fecha_final){
if (input_Hora_inicial > input_Hora_final){
"hora final debe ser mayor a la hora inicial"
}
}
I use Bootstrap 4 and TempusDominus for date and time manipulation.
this is my form
<form id="create_event_frm" data-target="create_event_frm" action="{{route('etable')}}" method="post" enctype="multipart/form-data">
@csrf
<div class="row"> <!-- SECCION DE INPUT TITULO Y TOGGLET'S -->
<div class="col-12">
<div class="form-group">
<input type="text" name="event_title" id="event_title" required maxlength="60" class="form-control" placeholder="Titulo del evento">
<input type="hidden" id="set_start_time_data" value="No" />
<input type="hidden" id="set_end_time_data" value="No" />
<input type="hidden" name="set_end_date_data" id="set_end_date_data" value="No" />
</div>
</div>
</div>
<div class="form-group row"> <!-- SECCION FECHA INICIO / HORA INICIO / TOGGLET -->
<div class="col-5 col-xl-5">
<div class="form-group">
<div class="input-group date" name="event_start_date" id="event_start_date" data-target-input="nearest">
<input type="text" pattern="(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d" placeholder="Fecha de inicio" name="event_start_date" required id="event_start_date" class="form-control datetimepicker-input" data-target="#event_start_date" />
<div class="input-group-append" data-target="#event_start_date" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<div class="col-4 col-xl-5" id="event_start_time_area" style="display: none">
<div class="form-group">
<div class="input-group date" id="event_start_time" data-target-input="nearest">
<input type="text" name="event_start_time" id="event_start_time" value="00:00" class="form-control datetimepicker-input" data-target="#event_start_time" placeholder="Hora de inicio"/>
<div class="input-group-append" data-target="#event_start_time" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-clock"></i></div>
</div>
</div>
</div>
</div>
<div class="col-3 col-xl-2" >
<div id="start_time_toggle">
<button type="button" class="btn btn-md" title="Añadir hora de inicio" onclick="add_start_time()">
<i class="text-success fa fa-plus"></i>
<i class="text-success fa fa-clock"></i>
</button>
</div>
</div>
</div>
<div class="form-group row" id="end_date_area" style="display: none"> <!-- SECCION FECHA TERMINO / HORA TERMINO / TOGGLET -->
<div class="col-5 col-xl-5">
<div class="form-group">
<div class="input-group date" name="event_end_date" id="event_end_date" data-target-input="nearest">
<input type="text" pattern="(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d" name="event_end_date" id="event_end_date" class="form-control datetimepicker-input" data-target="#event_end_date" placeholder="Fecha de termino"/>
<div class="input-group-append" data-target="#event_end_date" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<div class="col-4 col-xl-5" id="event_end_time_area" style="display: none">
<div class="input-group date" id="event_end_time" data-target-input="nearest">
<input type="text" name="event_end_time" id="event_end_time" value="23:59" class="form-control datetimepicker-input" data-target="#event_end_time" placeholder="Hora de termino"/>
<div class="input-group-append" data-target="#event_end_time" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-clock"></i></div>
</div>
</div>
</div>
<div class="col-3 col-xl-2">
<div id="end_time_toggle">
<button type="button" class="btn btn-md" title="Añadir hora de termino" onclick="add_end_time()">
<i class="text-success fa fa-plus"></i>
<i class="text-success fa fa-clock"></i>
</button>
</div>
</div>
</div>
<div class="form-group row"> <!-- BOTONES AGREGAR Y ELIMINAR FECHA DE TERMINO -->
<div class="col-3 col-xl-2">
<div id="end_date_toggle">
<button type="button" class="btn btn-default" onclick="add_end_date()" style="width: 117px" ><i class="text-success fa fa-plus"></i> Fecha fin </button>
</div>
<div style="display: none" id="btn-eliminar">
<button type="button" class="btn btn-default" onclick="remove_end_date()" style="width: 117px" > <i class="text-danger fa fa-times"></i> Eliminar </button>
</div>
</div>
</div>
<div class="section row"> <!-- DESCRIPCION -->
<div class="col-xl-12">
<div class="form-group">
<textarea class="form-control" id="event_description" name="event_description" placeholder="Descripcion" ></textarea>
</div>
</div>
</div>
<div class="modal-footer justify-content-between col-12"> <!-- FOOTER DEL MODAL -->
<button type="button" id="btnCerrar" class="btn btn-default" data-dismiss="modal" onclick="reset_config()">Cerrar</button>
<button type="submit" id="create_event_btn" class="btn btn-primary">Guardar</button>
</div>
</form>
I have made a small example that I hope will help you.
What I do is the following. I get the value of the different inputs and, as to use
TempusDominus
you have to includemomentjs
advantage and I convert them into moment objects.I compare them to the method
isBefore()
after finding out if any of the inputs are empty. And I throw the error if itisBefore()
istrue
.I add a
eventListener()
tochange
the datetimepicker event and that's it.