【问题标题】:Jquery validate not working for input with datepickerJquery 验证不适用于 datepicker 的输入
【发布时间】:2018-04-13 09:51:44
【问题描述】:

Jquery validate 适用于其他输入,但对于那些已初始化日期选择器的输入,即使输入了有效输入,它也不会更新错误消息。我还发现如果使用有效输入选择(聚焦)元素内部的值并将焦点移出元素,错误消息就会消失,这就是我尝试 $(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 中运行......请有人帮我解决这个问题..

【问题讨论】:

标签: javascript jquery jquery-validate


【解决方案1】:

找到我的答案:SparkBox

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

这样就解决了……

【讨论】:

  • 谢谢!这为我解决了。我正在尝试使用 $("#searchForm").validate();验证整个表单,但它不起作用。
猜你喜欢
  • 2017-12-17
  • 1970-01-01
  • 1970-01-01
  • 2011-03-10
  • 2015-08-03
  • 1970-01-01
  • 2021-01-16
  • 2017-08-07
  • 1970-01-01
相关资源
最近更新 更多