Jquery validate not working for input with datepicker

Question

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..

Allman style code format for JavaScript is not standard a practice; nor is it a good practice: https://stackoverflow.com/a/11247362/594235 — Sparky, Nov 02 '17 at 03:05

score 4 · Accepted Answer · answered Nov 01 '17 at 06:20

4

Found my answer : SparkBox

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

This solved it...

answered Nov 01 '17 at 06:20

Azima

3,835
15
49
95

Thank you! This solved it for me. I was trying with $("#searchForm").validate(); to validate the whole form and it was not working. – Ryan Thomas Dec 09 '19 at 09:32

Jquery validate not working for input with datepicker

1 Answers1