2017-08-30 97 views
0

我学会了IE浏览器在使用jQuery Validate Plugin(https://jqueryvalidation.org/)验证日期时遇到的一些问题。jQuery .validate - 在Internet Explorer中验证日期

我的规则只是starttime: {required: true, date: true},但我的格式是DD-MMM-YYYY hh:mm a,即2017年8月31日上午9:43。

这适用于其他浏览器,但IE说它是无效的日期。请注意,验证正在处理其他领域。

这里有一些很好的答案:Custom date format with jQuery validation plugin但具体而言,我如何在IE中验证我的日期格式?

我的猜测是我需要添加一个自定义的方法,但它应该是什么? RegEx或自定义日期,以及如何?对于RegEx验证日期的格式而不验证日期本身(例如32/01/2017),我确定,因为此页面使用日期选择器,并且用户无法直接输入数据。

EDIT(包括实际的代码):

<script type="text/javascript" src="js/plugins/jquery-validate/jquery.validate.min.js"></script> 

<script> 
    $(document).ready(function(){ 

     if ($("#newinspectionform").length > 0) { 
      var validate = $("#newinspectionform").validate({ 
       errorClass: "has-error", 
       validClass: "", 
       errorElement: "span", 
       ignore: [], 
       errorPlacement: function (error, element) { 
        $(element).after(error); 
        $(element).parents(".form-group").addClass("has-error"); 
       }, 
       highlight: function (element, errorClass) { 
        $(element).parents(".form-group").removeClass("has-success").addClass(errorClass); 
       }, 
       unhighlight: function (element, errorClass, validClass) { 
        $(element).parents(".form-group").removeClass(errorClass).addClass(validClass); 
       }, 
       rules: { 
        propertyid: {required: true}, 
        type: {required: true}, 
        starttime: {required: true, date: true}, 
        endtime: {required: true, date: true} 
       } 
      }); 
     } 

    ... other stuff 
</script> 
+0

你检查了这个? https://stackoverflow.com/questions/4809451/date-validator-on-datepicker-trigger-false-negatives-in-ie7-ie8 –

+0

是的 - 有一些这样的,但不幸的是这些解决方案并没有帮助这种情况。 – Warren

回答

0

我与自定义的日期方法解决了这个问题。我需要这样做,因为我的格式需要保持为DD-MMM-YYYY hh:mm a,即2017年8月31日上午9:43。

$.validator.addMethod(
     "inspDateTime", 
     function(value, element) { 
      // put your own logic here, this is just a (crappy) example 
      return value.match(/^(0?[1-9]|[12][0-9]|3[0-1])[/., -](0?[1-9]|1[0-2]|[a-zA-Z]{3})[/., -](19|20)?\d{2} (0?[1-9][012]?:[0-5][0-9] [ap]m)$/); 
     }, 
     "Please enter a valid date." 
    ); 

我不确定为什么Internet Explorer无法验证这个日期,但上面的正则表达式在IE中工作。信用这个答案为起始正则表达式:https://stackoverflow.com/a/17392795/2066625

0

编辑:包括日期选择器

尝试。它在IE中使用datePicker。你是否也想设定时间?如果是这样,我知道有些人已经为datetimePicker创建了一个插件。

<!doctype html> 
<html> 
<head> 
</head> 
<body> 
    <form> 
     <input type="date" class="left" id="starttime" name="starttime"> 
     <br/> 
     <input type="submit" value="Validate!"> 
    </form> 
</body> 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<script> 
    //datePicker Set format 
    $('#starttime').datepicker({ 
     dateFormat: 'yy-mm-dd' 
    }).datepicker("setDate", new Date()); 


    var validator = $("form").validate ({ 
     rules: { 
      starttime: {required: true, date: true} 
     }, 
     messages: { 
      starttime: "Please enter a valid start date" 
     } 
    }); 
</script> 

+0

我刚刚编辑我的问题以包含代码。正如你将会看到的那样,它被封装在'$(document).ready()'中。另外,其他验证工作 - 这只是问题的日期 – Warren