jQuery Validate 插件在 IE 中失败答案

【问题标题】：jQuery Validate plugin fails in IEjQuery Validate 插件在 IE 中失败
【发布时间】：2013-02-21 15:37:23
【问题描述】：

我有一个使用 jQuery 验证的表单。该表单在除 IE 之外的所有浏览器中都能完美运行（无论 IE 版本如何）。我已经阅读了其他几篇关于让它工作的文章，但它们没有帮助。他们中的一些人提到去掉尾随逗号；我试过了，但没有用。任何帮助将不胜感激。

这是我的验证码：

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

这是我的 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>

我什至尝试尽可能简化验证代码。简化后它仍然适用于除 IE 之外的所有浏览器。

简化验证码：

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

【问题讨论】：

如果您将<input> 元素命名为id 以外的名称，代码是否按预期工作？
@FrédéricHamidi，消除可能令人困惑的对象标识符可能是个好主意，但是，它不在 the list of reserved words 上。
刚刚尝试将从 id 更改为 idnumber，但仍然遇到同样的问题。
您的 HTML 缺少什么？ </head> 标签后面没有<body> 标签。
尴尬。修复了这个问题，但在 IE 中仍然没有验证。

标签： jquery internet-explorer jquery-validate

【解决方案1】：

您的代码：

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

您应该将代码包装在准备好的 DOM 中，并且它可以按照下面的演示工作。

$(document).ready(function() {

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

});

工作演示：http://jsfiddle.net/HNK6w/

如您所见，它在 Windows 7 上的 Internet Explorer 9 中运行...

【讨论】：

@AustinDennis，我误读了您的 OP，并错误地认为您两次致电 validate()。无论如何，您的烦恼没有任何解释。您的代码一旦包装在 DOM 就绪函数中，就可以正常工作：jsfiddle.net/HNK6w
是的，我可以看到它在 jsfiddle 中运行良好。我什至使用了 jsfiddle 中的所有代码来重新创建页面，以防万一我们没有看到。但是，当我在 IE9 中加载 jsfiddle 页面时......它不起作用。
@AustinDennis，我正在使用运行 IE 9 的全新安装的 Windows 7 版本，并且 jsFiddle 运行良好，没有任何 JS 错误。
嗯。同样在这里。现在我什至无法让 jsFiddle 在 Chrome 中工作，而我测试它时它刚刚工作。 jsFiddle 给我一个错误，{“错误”：“请使用 POST 请求”}。当我第一次在 Win7 上的 IE9 中运行 jsFiddle 时，每次单击提交按钮时它都会提示我打开/下载一些东西。我不知所措。感谢所有帮助/建议。我想我会放弃尝试让它在 IE 中工作。
@AustinDennis，我发的jsFiddle，只要你不编辑，只会给出验证错误或者成功提示。添加到我的答案中的 IE9 屏幕截图显示插件显示错误。

【解决方案2】：

IE 不能很好地使用额外的逗号。

请注意messages 属性后面的额外逗号。删除它即可获胜。

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

【讨论】：

废话。以为我都得到了。但是，删除了它，当我尝试在表单字段为空白的情况下提交时，它仍然不显示错误消息。
虽然消除尾随逗号是一种很好的做法，但“尾随逗号”正在迅速成为过去。我相信只影响IE7及以下。