jQuery Validate plugin fails in IE

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>

回答1:

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

回答2:

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."}
        },  <--------------------