On submit of the form, date-picker field validates and highlight it is mandatory as expected.But even after selecting the date from the picker,the validation doesn't go away. The field still highlights in red and prevents the form submission.
Here is the JS i tried with to re-validate with on change function:
function lpad(n, width, z) {
z = z || '0';
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
function doSubmit() {
$('#filterForm').bootstrapValidator('validate');
if ($('#filterForm').bootstrapValidator('isValid').has('.has-error').length == 0) {
// Make the ajax call here.
var link = "[LL_REPTAG_URLPREFIXFULL /]?func=ll&objId=[LL_REPTAG_$MainReport /]&objAction=RunReport";
var datepicker_StartDate = $.trim($('#datepicker_StartDate').val());
var datepicker_EndDate = $.trim($('#datepicker_EndDate').val());
var resultStart = datepicker_StartDate.split("/");
var resultEnd = datepicker_EndDate.split("/");
var Start = resultStart[2] + "/" + resultStart[1] + "/" + resultStart[0];
var End = resultEnd[2] + "/" + resultEnd[1] + "/" + resultEnd[0]
var startdate = "D/" + Start + ":0:0:0"
var enddate = "D/" + End + ":23:59:59"
link = link + "&inputlabel1=" + startdate
link = link + "&inputlabel2=" + enddate
link = link + "&inputlabel3=" + $.trim($('#IncomingIAGRefno').val())
link = link + "&inputlabel4=" + $.trim($('#LetterRefno').val())
link = link + "&inputlabel5=" + $.trim($('#status').val())
document.location.href = link;
}
}
$(document).ready(function() {
var sd = new Date();
sd.setDate(sd.getDate() - 30);
var dd = new Date();
$('#datepicker_StartDate').val(lpad(sd.getDate(), 2) + "/" + lpad(sd.getMonth() + 1, 2) + "/" + lpad(sd.getFullYear(), 4));
$('#datepicker_EndDate').val(lpad(lpad(dd.getDate(), 2) + "/" + lpad(dd.getMonth() + 1, 2) + "/" + +dd.getFullYear(), 4));
//Validataion Begins
$('#filterForm').bootstrapValidator({
// To use feedback icons, ensure to use Bootstrap v3.1.0 or later
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
datepicker_StartDate: {
validators: {
stringLength: {
min: 8,
},
notEmpty: {
message: 'The Start Acceptance Date is required and cannot be empty'
},
date: {
format: 'dd/mm/yyyy',
message: 'The format is dd/mm/yyyy'
}
}
},
datepicker_EndDate: {
validators: {
stringLength: {
min: 8,
},
notEmpty: {
message: 'The End Acceptance Date is required and cannot be empty'
}
}
}
}
});
$("#datepicker_StartDate").on('changeDate', function(e) {
$('#filterForm').bootstrapValidator('revalidateField', 'datepicker_StartDate');
});
$("#datepicker_EndDate").on('changeDate', function(e) {
$('#filterForm').bootstrapValidator('revalidateField', 'datepicker_EndDate');
});
});
$(function() {
$("#datepicker_StartDate").datepicker();
$("#datepicker_EndDate").datepicker();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container">
<form class="well form-horizontal" id="filterForm" METHOD="post" ACTION="[LL_REPTAG_URLPREFIX /]">
<INPUT TYPE="hidden" NAME="func" VALUE="ll">
<INPUT TYPE="hidden" NAME="objId" VALUE="[LL_REPTAG_$MainReport /]">
<INPUT TYPE="hidden" NAME="objAction" VALUE="runreport">
<fieldset>
<legend>
<center>
<h4 style="font-family:arial black;color: #285a8b;"><b>Report</b></h4>
</center>
</legend><br>
<div class="form-group">
<label class="col-md-4 control-label">Start Acceptance Date</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input type="text" id="datepicker_StartDate" name="datepicker_StartDate" placeholder="Start Acceptance Date" class="form-control date-picker">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End Acceptance Date</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input type="text" id="datepicker_EndDate" name="datepicker_EndDate" placeholder="End Acceptance Date" class="form-control">
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4"><br>
              <button type="button" id="runReportButton" onclick="return doSubmit();" class="btn btn-warning">        SUBMIT <span class="glyphicon glyphicon-send"></span>        </button>
</div>
</div>
</fieldset>
</form>
</div>
</div><!-- /.container -->
</body>
The issue with your code it that the validation expects the format in 'DD/MM/YYYY'.
Please change the datepicker format and it will work. And also you need to add the form tag which is missing in your code. and form onsubmit trigger your logic. See the sample code bellow.
Full Working Code:
Hope this solve the problem.