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: stackoverflow.com/a/11247362/594235 — Sparky
– Sparky, Commented Nov 2, 2017 at 3:05

Azima · Accepted Answer · 2017-11-01 06:20:31Z

4

Found my answer : SparkBox

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

This solved it...

answered Nov 1, 2017 at 6:20

Azima

4,16115 gold badges61 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ryan Thomas Over a year ago

Thank you! This solved it for me. I was trying with $("#searchForm").validate(); to validate the whole form and it was not working.

Collectives™ on Stack Overflow

Jquery validate not working for input with datepicker

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related