Jquery 验证不适用于 datepicker 的输入

Posted 2023-02-21

【中文标题】Jquery 验证不适用于 datepicker 的输入

【英文标题】：Jquery validate not working for input with 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 的 Allman 风格代码格式不是标准的做法；这也不是一个好习惯：***.com/a/11247362/594235

【参考方案1】：

找到我的答案：SparkBox

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

这样就解决了……

【讨论】：

谢谢！这为我解决了。我正在尝试使用 $("#searchForm").validate();验证整个表单，但它不起作用。