Jquery validate works fine for other inputs, but for those with datepickers initialized, it is not updating error messages even though valid input is entered. Also I figured out that if the value inside the element is selected (focused) with valid input and focused out of the element, the error message vanishes, which is why I tried to $(element).select(), It worked but it had drawbacks...

<div class="form-group">
   <label for="date_of_birth" class="col-sm-4 control-label">Date of Birth <span class="input-required">*</span></label>
      <div class="col-sm-7">
          <div class='input-group date' id='date_of_birth'>
              <input type='text' class="form-control dateField" name="date_of_birth" placeholder="MM/DD/YYYY" id="date_of_birth_field" data-toggle="tooltip" data-placement="top"value=""/>
              <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> </span>
          </div>
       </div>
 </div>

This is how datePicker initialized, if it helps..

$('#date_of_birth').datetimepicker({
    format: 'MM/DD/YYYY',
    language: 'en',
    maxDate: new Date,
    icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-arrow-up",
        down: "fa fa-arrow-down"
    }
});

Here is a validation script:

$.validator.setDefaults({
    errorClass: 'help-block',
    errorElement: 'span',
    focusInvalid: true,
    ignore: ":hidden",
    highlight: function(element, errorClass, validClass)
    {

      var fieldtype = ($(element).hasClass('dateField') ? 'dateField' : 'normal');
      switch(fieldtype)
      {
        case "dateField":
          $(element).closest('.form-group').addClass('has-error');
          // $(element).select();
          break;
        default:
          $(element).closest('.form-group').addClass('has-error');
          break;
      }

    },
    unhighlight: function(element, errorClass, validClass)
    {
      if($(element).hasClass('select2-offscreen'))
      {
        $(element).closest('.form-group').removeClass('has-error');
        $(element).next('span').css({display: "none"});
      }

      else
      {
        $(element).closest('.form-group').removeClass('has-error');
      }   
    },

    errorPlacement: function (error, element) {
            var fieldtype = ($(element).hasClass('dateField') ? 'dateField' : 'normal');

            switch (fieldtype) {
                case "dateField":
                    error.appendTo(element.parent().parent());
                    break;
                default:
                    error.appendTo(element.parent());
                    break;
            }
        }
  });
$('#employee-form').validate(
  {
    rules: {
            date_of_birth: {
                gbdDate: true,
                required: true
            }
           },
    messages: {
            date_of_birth: "Please enter valid date";
              }
  });

I know this is all long and boring, but I couldn't make it run in JSfiddle... Please some one help me with this..

Jquery validate works fine for other inputs, but for those with datepickers initialized, it is not updating error messages even though valid input is entered. Also I figured out that if the value inside the element is selected (focused) with valid input and focused out of the element, the error message vanishes, which is why I tried to $(element).select(), It worked but it had drawbacks...

<div class="form-group">
   <label for="date_of_birth" class="col-sm-4 control-label">Date of Birth <span class="input-required">*</span></label>
      <div class="col-sm-7">
          <div class='input-group date' id='date_of_birth'>
              <input type='text' class="form-control dateField" name="date_of_birth" placeholder="MM/DD/YYYY" id="date_of_birth_field" data-toggle="tooltip" data-placement="top"value=""/>
              <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> </span>
          </div>
       </div>
 </div>

This is how datePicker initialized, if it helps..

$('#date_of_birth').datetimepicker({
    format: 'MM/DD/YYYY',
    language: 'en',
    maxDate: new Date,
    icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-arrow-up",
        down: "fa fa-arrow-down"
    }
});

Here is a validation script:

$.validator.setDefaults({
    errorClass: 'help-block',
    errorElement: 'span',
    focusInvalid: true,
    ignore: ":hidden",
    highlight: function(element, errorClass, validClass)
    {

      var fieldtype = ($(element).hasClass('dateField') ? 'dateField' : 'normal');
      switch(fieldtype)
      {
        case "dateField":
          $(element).closest('.form-group').addClass('has-error');
          // $(element).select();
          break;
        default:
          $(element).closest('.form-group').addClass('has-error');
          break;
      }

    },
    unhighlight: function(element, errorClass, validClass)
    {
      if($(element).hasClass('select2-offscreen'))
      {
        $(element).closest('.form-group').removeClass('has-error');
        $(element).next('span').css({display: "none"});
      }

      else
      {
        $(element).closest('.form-group').removeClass('has-error');
      }   
    },

    errorPlacement: function (error, element) {
            var fieldtype = ($(element).hasClass('dateField') ? 'dateField' : 'normal');

            switch (fieldtype) {
                case "dateField":
                    error.appendTo(element.parent().parent());
                    break;
                default:
                    error.appendTo(element.parent());
                    break;
            }
        }
  });
$('#employee-form').validate(
  {
    rules: {
            date_of_birth: {
                gbdDate: true,
                required: true
            }
           },
    messages: {
            date_of_birth: "Please enter valid date";
              }
  });

I know this is all long and boring, but I couldn't make it run in JSfiddle... Please some one help me with this..

• javascript
• jquery
• jquery-validate

• Allman style code format for JavaScript is not standard a practice; nor is it a good practice: stackoverflow./a/11247362/594235 – Sparky Commented Nov 2, 2017 at 3:05

1 Answer 1

Found my answer : SparkBox

$('.dateField').datepicker({
    onClose: function()
     {
        $(this).valid();
     }
});

This solved it...