Bootstrap Validator with datepicker does not validate date

Question

I am using bootstrap validator to validate a form but I have been unable to get it to validate a text box that gets populated by datepicker. When I click in the text box, datepicker displays a calendar. I select a date and the text box gets populated with the selected date (the calendar does not auto-close which is another issue even though I modified the bootstrap-datepicker.js to have autoclose default to yes) but the validator seems to ignore the box. It never changes to red or green and never gets a check or an x. Any suggestions?

Answer 1

Validation will not work with input id only with name attribute and the datepicker input doesn't has the name attribute (or may be you forget it)

<input id="PayDate" name="PayDate" type="text" class="form-control date-picker" />

and you don't need to check the length of date, don't need following piece of code

stringLength: {
    max: 10,
    minlength: 10,
    message: 'The Pay Date must be 10 characters long'
}

and you are using bootstrapdate picker, to validate the date and and re-validate the date if change you need changeDate event

$('.date-picker').on('changeDate show', function(e) {
    $('#contactForm').bootstrapValidator('revalidateField', 'PayDate');
});

So final Code will be

$(document).ready(function() {
 $(".date-picker").datepicker();
 $('#contactForm').bootstrapValidator({
   feedbackIcons: {
	 valid: 'glyphicon glyphicon-ok',
	 invalid: 'glyphicon glyphicon-remove',
	 validating: 'glyphicon glyphicon-refresh'
   },
   fields: {
	 uploadfile: {
	   validators: {
		 notEmpty: {
		   message: 'You must select a valid payroll file to upload'
		 },
		 file: {
		   extension: 'txt,xls,csv',
		   type: 'text/plain,application/vnd.ms-excel,text/csv'
		 }
	   }
	 },
	 PayDate: {
	   validators: {
		 notEmpty: {
		   message: 'The Pay Date is required and cannot be empty'
		 },
		 date: {
		   format: 'MM/DD/YYYY',
		   message: 'The format is MM/DD/YYYY'
		 }
	   }
	 }
   }
 });
 $('.date-picker').on('changeDate show', function(e) {
   $('#contactForm').bootstrapValidator('revalidateField', 'PayDate');
 });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
<form id="contactForm" runat="server" method="post" class="form-horizontal">
  <div class="form-group">
    <label class="col-md-3 control-label">File Name</label>
    <div class="col-md-6 bs-example">
      <input type="file" class="form-control" name="uploadfile" />
      <asp:Label ID="Label3" runat="server" Text="Navigate to the file you wish to upload" CssClass="label_under_text"></asp:Label>
    </div>
  </div>

  <div class="date-form">
    <label class="col-md-3 control-label">Pay Date</label>
    <div class="col-md-6 bs-example">
      <div class="input-group">
        <label for="PayDate" class="input-group-addon btn">
          <span class="glyphicon glyphicon-calendar"></span></label>
        <input type="text" id="PayDate" name="PayDate" class="form-control date-picker" />
      </div>
    </div>
  </div>
  <br />
  <br />
  <div class="form-group">
    <div class="col-md-9 col-md-offset-3">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Fiddle