Hello: I have a form with several checkboxes which I invoke with a script to show a datepicker calendar and a timepicker schedule when a checkbox is selected and I have the option to select time and date. The detail is that if I do not select date and time with date and time picker the form is passed without data because I have not selected any time and no date. I append a section of the code. How can I validate so that it indicates to me that I must fill out or compulsorily select the two date and time options? EYE I do not want to select datetimepicker. Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<style>
p.ex1 {
padding: 2cm;
}
p.ex2 {
padding: 0.5cm 3cm;
}
</style>
<script type="text/javascript">
function showContent()
{
element = document.getElementById("content");
check = document.getElementById("pase_de_entrada");
if (check.checked)
{
element.style.display='block';
}
else
{
element.style.display='none';
document.getElementById("date").value = "";
document.getElementById("time").value = "";
}
}
</script>
</head>
<body>
<p class="ex1">Pruebas</p>
<p class="ex2"></p>
<form role="form" class="login-form" action="verificar.php" method="POST" >
<fieldset class="form-group row">
<label class="col-sm-2">Tipo de Pase</label>
<div class="col-sm-3">
<div class="form-check"><label class="form-check-label"><input class="form-check-input" id="pase_de_entrada" type="checkbox" name="chk[]" value="Pase de entrada" onchange="javascript:showContent()" /> Pase de Entrada </label></div>
</div>
<script type="text/javascript">
$('form').submit(function(e){
if ($('input[type=checkbox]:checked').length === 0) {
e.preventDefault();
alert('DEBES SELECCIONAR EL TIPO DE PASE(S)');
}
});
</script>
</fieldset>
<div class="form-inline">
<div id="content" style="display: none;">
<div class="form-group row">
<label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="fecha_justificar">Fecha a Justificar Entrada</label>
<div class="col-md-4"><input class="form-control" id="date" name="date[]" placeholder="MM/DD/YYY" type="text" value=""/></div>
<link data-semver="0.0.6" rel="stylesheet" href="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.css" />
<!-- taking out AO theme <link rel="stylesheet" href="jquery-theme.css" /> -->
<script data-semver="0.0.6" src="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.js"></script>
<script>
$(document).ready(function(){
var date_input=$('input[name="date[]"]');
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options={
format: 'dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
};
date_input.datepicker(options);
})
</script>
<!--Zona del Hora -->
<label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="hora_justificar">Hora a Justificar</label>
<div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true" >
<input type="text" class="form-control" name="time[]" id="time" value="">
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span></div>
<script type="text/javascript" src="jquerys/clockpicker-gh-pages/src/clockpicker.js"></script>
<link rel="stylesheet" href="jquerys/clockpicker-gh-pages/src/clockpicker.css"/>
<script type="text/javascript">
$('.clockpicker').clockpicker();
var time_input=$('input[name="time[]"]');
</script>
</div>
</div>
</div>
<button type="submit" class="btn" id="btn-formulario" name="enviar" value="enviar" >Enviar Solicitud a RH</button>
</body>
</html>
<?php
foreach ($_POST['date'] as $key1 => $value1)
$selected1 .= $value1.' ';
foreach ($_POST['time'] as $key1 => $value1)
$selected2 .= $value1.' ';
echo 'FECHA SELECCIONADA '.$selected1.'';
echo '<br>';
echo 'HORA SELECCIONADA '.$selected2.'';
?> 
