jQuery .validate - validating dates in Internet Explorer

Question

I've learned the hard way that IE has some issues with with validating dates using the 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.

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

There are some great answers here: Custom date format with jQuery validation plugin but specifically, how can I validate my date format in 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.

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>

Have you checked out this? https://stackoverflow.com/questions/4809451/date-validator-on-datepicker-trigger-false-negatives-in-ie7-ie8 — Aaron K., Aug 30 '17 at 23:53
Yes - there's a few like that, but those solutions don't help this situation unfortunately. — Warren, Aug 31 '17 at 00:03

Aaron K. · Answer 1 · 2017-08-31T17:24:28.437

Edit: to include 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.

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

I've just edit my question to include the code. As you will see, it is wrapped in `$(document).ready()`. Also, the other validations work - it is just the dates that are the problem — Warren, Aug 31 '17 at 03:44

score 0 · Accepted Answer · answered Sep 01 '17 at 01:38

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.

    $.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://stackoverflow.com/a/17392795/2066625

jQuery .validate - validating dates in Internet Explorer

2 Answers2