Question

Jquery验证适用于其他输入，但对于初始化了datepickers的用户，即使输入了有效输入，它也不会更新错误消息。另外我想通过如果元素内部的值被选中（聚焦）有效输入并聚焦在元素之外，错误消息就会消失，这就是为什么我尝试$（element）.select（），它工作但是它有缺点...

<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初始化的方式，如果它有帮助..

$('#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中运行......请有人帮助我...

Answer 1

找到我的答案：

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

这解决了它......

Jquery验证不适用于使用datepicker

1 个答案: