jQuery验证不适用于日期选择器的输入 [英] Jquery validate not working for input with datepicker

问题描述

jQuery validate对于其他输入也可以正常工作，但是对于已初始化datepicker的输入，即使输入了有效输入，它也不会更新错误消息.我还发现，如果使用有效输入选择(聚焦)元素内的值并将其聚焦到元素外，错误消息就消失了，这就是为什么我尝试$(element).select()的原因，但它起作用了有缺点...

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>

如果有帮助，这就是datePicker初始化的方式.

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"
    }
});

这是一个验证脚本:

$.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";
              }
  });

我知道这很漫长而无聊，但是我无法使其在JSfiddle中运行...请有人帮助我解决这个问题.

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

推荐答案

找到我的答案: SparkBox

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

这解决了...

这篇关于jQuery验证不适用于日期选择器的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！