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>

标签： jquery internet-explorer jquery-validate

2条回答

你好瞎i

2楼-- · 2019-02-21 03:51

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

0人赞添加讨论(0) 举报

我欲成王，谁敢阻挡

3楼-- · 2019-02-21 03:51

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

0人赞添加讨论(0) 举报

jQuery Validate plugin fails in IE

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间