jQuery Validate plugin fails in IE

Question

I have a form that I'm using jQuery validate with. The form works perfectly in every browser except for IE (regardless of which version of IE). I've read several other posts about getting it to work and they didn't help. A couple of them mentioned getting rid of trailing commas; I tried that and it didn't work. Any help would be greatly appreciated.

Here is my validation code:

<script>
$(document).ajaxStop(function(){
  setTimeout("window.location = 'index.php'",60000);
});
        $.validator.addMethod("zero", function(input, element) {
        return ! input || input.match(/^[0]/);
}, "This field must start with a zero");
        $("#studentid").validate({
            debug: false,
            rules: {
                id: {required: true, zero: true}
            },
            messages: {
                id: {required: "Please enter the student's ID number.", zero: "Student ID must start with a zero."}
            },                 
            submitHandler: function(form) {

      $.ajax({
          url: 'tutoring.php',
          type: 'POST',
          data: $("#studentid").serialize(),         
          success: function(data) {
        $("#id").val("");
        $("#results").empty();
        $("#results").append(data);
        }
      });

      return false;
   }
});

</script>

Here is my HTmL:

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<style type="text/css">
label.error {
  width: 350px;
  display: inline;
  color: red;
}
</style>
</head>

<div align="center">
  <h1>Welcome to the Ojeda Middle School Tutoring Website</h1>
</div>
<p>You can use this page to view tutoring information for the current week.</p>
<p>Please enter a student ID number below then click Submit.</p>
<form id='studentid' class='studentid' action='' method='get'>
  <p>
    <label for="id">Student ID:</label>
    <input type="text" name="id" id="id" /><br>
    <button id='submit' class='submit'>Submit</button>
  </p>
</form>
<p>
<div id="results"></div>

I even tried simplifying the validation code as much as possible. After simplifying it it still worked in all browsers except IE.

Simplified validation code:

<script>
$(document).ajaxStop(function(){
  setTimeout("window.location = 'index.php'",60000);
});

        $("#studentid").validate({
            debug: false,
            rules: {
                id: {required: true}
            },
            messages: {
                id: {required: "Please enter the student's ID number."}
            },                 

});

</script>

Does the code work as expected if you name your `` element something other than `id`? — Frédéric Hamidi, Feb 21 '13 at 15:50
@FrédéricHamidi, it might be a good idea to eliminate potentially confusing object identifiers, however, it's not on [the list of reserved words](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Reserved_Words). — Sparky, Feb 21 '13 at 15:55
Just tried changing the from id to idnumber and am still having the same issue. — Austin Dennis, Feb 21 '13 at 15:56
What's missing from your HTML? There's no `` tag after the `` tag. — Sparky, Feb 21 '13 at 16:05
I didn't think it would or I would have added it to my answer. However, IE is most sensitive to any invalid HTML. — Sparky, Feb 21 '13 at 16:14
Speaking of invalid HTML, the `align` attribute within `div` elements has been deprecated for years. — Sparky, Feb 21 '13 at 16:21
As you can see in [my jsFiddle](http://jsfiddle.net/HNK6w/), your code is working fine. However, my jsFiddle is also using version 1.11 of jQuery Validate. You are linking to 1.7, and the latest version is 1.11. — Sparky, Feb 21 '13 at 16:29
Should've mentioned this in my comment on your answer. I updated both the validate and the jquery versions in my page. Still no dice in IE. And like I said when I run the jsfiddle in IE9 it doesn't work either. — Austin Dennis, Feb 21 '13 at 18:10

score 4 · Answer 1 · answered Feb 21 '13 at 15:40

4

IE does not play nicely with extra commas.

Please note the extra comma after the messages property. Remove it to win.

$("#studentid").validate({
        debug: false,
        rules: {
            id: {required: true}
        },
        messages: {
            id: {required: "Please enter the student's ID number."}
        },  <--------------------

answered Feb 21 '13 at 15:40

Brad M

7,857
1
23
40

Crap. Thought I got all of them. However, deleted that and it still does not display the error message when I try to submit with the form field blank. – Austin Dennis Feb 21 '13 at 15:47
Although eliminating trailing commas is good practice, the "trailing comma of death" is fast becoming a thing of the past. Only affects **IE7 and below**, I believe. – Sparky Feb 21 '13 at 15:51

Sparky · Accepted Answer · 2013-02-21T18:30:51.940

4

Your code:

$.validator.addMethod("zero", function(input, element) { ... });
$("#studentid").validate({
    // options
});

You should wrap your code in a DOM ready and it's working as per the demo below.

$(document).ready(function() {

    $.validator.addMethod("zero", function(input, element) { ... });
    $("#studentid").validate({ // <-- initialize the plugin once
        // options
    });

});

Working Demo: http://jsfiddle.net/HNK6w/

As you can see, it's working in Internet Explorer 9 on Windows 7...

enter image description here

edited Feb 21 '13 at 18:30

answered Feb 21 '13 at 15:50

Sparky

98,165
25
199
285

@AustinDennis, I misread your OP and erroneously thought you called `validate()` twice. Anyway, there is no explanation for your troubles. Your code, once wrapped in a DOM ready function, is working perfectly fine: http://jsfiddle.net/HNK6w – Sparky Feb 21 '13 at 16:35
Yeah, I can see that it works fine in jsfiddle. I even used all the code from jsfiddle to recreate the page JUST in case there was something we hadn't seen. However, when I load the jsfiddle page in IE9...it doesn't work. – Austin Dennis Feb 21 '13 at 18:04
@AustinDennis, I'm using a freshly installed version of Windows 7 running IE 9 and the jsFiddle is working fine without any JS errors. – Sparky Feb 21 '13 at 18:13
Hmm. Same here. And now I can't even get the jsFiddle to work in Chrome where it just worked when I tested it. jsFiddle is giving me an error, {"error": "Please use POST request"}. When I ran the jsFiddle the first time in IE9 on Win7 it prompted me to open/download something each time I clicked the submit button. I'm at a loss. Thanks for all the help/suggestions. I think I'll just give up on trying for it to work in IE. – Austin Dennis Feb 21 '13 at 18:23
@AustinDennis, the jsFiddle I posted, as long as you didn't edit it, will only give a validation error or a success alert. IE9 screenshot added to my answer shows the plugin displaying an error. – Sparky Feb 21 '13 at 18:31
Just solved the problem. I checked the links you were using on jsFiddle for validate and additionalmethods js files. My district's filter blocks those. When I entered the admin password to unlock those pages temporarily it worked in all browser. Thank you and sorry for all the hassle. – Austin Dennis Feb 21 '13 at 19:01
@AustinDennis, I'm glad you figured it out, however, if those URL's were blocked, how was this previously working in any other browser? – Sparky Feb 21 '13 at 22:23
Well, those links were what was causing the jsFiddle to not work. After unblocking them jsFiddle would work correctly in IE9. However, a page I created exactly from the jsFiddle (via copy/paste) would not work in IE9...but would in all other browsers. It doesn't seem to make sense, so I just created a redirect for IE browsers. It seems like we've tried everything else to get it to work. – Austin Dennis Feb 21 '13 at 22:50
@AustinDennis, what about just hosting jQuery and jQuery Validate on the same domain instead of using a CDN? – Sparky Feb 21 '13 at 23:11

jQuery Validate plugin fails in IE

2 Answers2

Linked