jQuery .validate - 验证Internet Explorer中的日期

I've learned the hard way that IE has some issues with with validating dates using the jQuery Validate Plugin (https://jqueryvalidation.org/).

我已经了解到IE在使用jQuery Validate Plugin(https://jqueryvalidation.org/)验证日期方面存在一些问题。

My rule is simply starttime: {required: true, date: true} but my format is DD-MMM-YYYY hh:mm a, i.e. 31-Aug-2017 9:43 am.

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

This works in other browsers, but IE says it's an invalid date. Note, validation is working on other fields.

这适用于其他浏览器,但IE表示这是一个无效的日期。注意,验证正在其他领域。

There are some great answers here: Custom date format with jQuery validation plugin but specifically, how can I validate my date format in IE?

这里有一些很好的答案:使用jQuery验证插件自定义日期格式,但具体来说,如何在IE中验证我的日期格式?

My guess is that I need to add a custom method, but what should be in it? RegEx or a custom date, and how? I'm ok with RegEx validating the format of a date without validating the date itself (eg. 32/01/2017) because this page uses a datepicker and the user cannot enter data directly.

我的猜测是我需要添加一个自定义方法,但应该包含哪些内容? RegEx或自定义日期,以及如何?我很好用RegEx验证日期格式而不验证日期本身(例如32/01/2017)因为这个页面使用了一个日期选择器而用户无法直接输入数据。

EDIT (to include actual code):

编辑(包括实际代码):

<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>

2 个解决方案

#1

Edit: to include datepicker

编辑:包括datepicker

Try This. It works in IE with a datePicker. Are you trying to also set the time? If so I know some people have created a pluggin for datetimePicker.

试试这个。它在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>

#2

I fixed this with a custom date method. I needed to do it this way because my format needed to remain as DD-MMM-YYYY hh:mm a, i.e. 31-Aug-2017 9:43 am.

我用自定义日期方法修复了这个问题。我需要这样做,因为我的格式需要保持为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."
    );

I'm not sure why Internet Explorer couldn't validate this date, but the above regex works in IE. Credit this answer for the starting regex: https://*.com/a/17392795/2066625

我不确定为什么Internet Explorer无法验证此日期,但上述正则表达式适用于IE。相信这个答案的起始正则表达式:https://*.com/a/17392795/2066625

#1