是什么导致了 I.E.当其他浏览器验证时不验证（jquery）答案

【问题标题】：What is causing I.E. to not validate (jquery) when other browsers do是什么导致了 I.E.当其他浏览器验证时不验证（jquery）
【发布时间】：2011-11-10 02:34:50
【问题描述】：

我有一个使用 jQuery 1.7 和 jQuery validation 1.9 的表单（在本文发布时都是最新的），它适用于 firefox / chrome / safari，但仅部分适用于 I.E。（至少 8.0，还没有测试其他版本）——不知道交易是什么。这里有一个例子： http://jsfiddle.net/bulbous/hZn5A/100/

如果您单击测试，您会看到文本输入控件在所有浏览器中都经过验证，但下拉列表在 i.e. 中未经过验证（但在所有其他浏览器中都经过验证）。我还包括以下示例的完整 html：

<head>
    <script src="jquery-1.7.js" type="text/javascript"></script>
    <script src="jquery.validate-1.9.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
  jQuery.validator.addMethod("notEqual", function(value, element, param) {
      return this.optional(element) || value != param;
  }, "Please choose some value!");

  $('#myForm').validate({
      rules: {
          text: {
              required: true
          },
          category: {
              required: true,
              notEqual: "---"
          }
      },
      messages: {
          text: {
              required: "Text required"
          },
          category: {
              required: "Category required"
          }
      }
  });
});
    </script>
<form id="myForm">
    <select id="category" name="category">
        <option>---</option>
        <option>Category 1</option>
        <option>Category 2</option>
        <option>Category 3</option>
    </select>
    <input type="text" id="text" name="text" />
    <input type="submit" value="Test" />
</form
</body>
</html>

【问题讨论】：

在 IE9 中为我工作。（点击“测试”会显示“请选择一些值！”）
啊，很高兴知道，感谢您的反馈——我必须让它在 I.E. 中工作。 8 也是，但很高兴听到未来更光明 :)
只是一个想法。验证插件 v1.9 仅适用于 jQuery 1.6。也许你应该试试 jQuery 1.6.4 看看。

标签： javascript jquery internet-explorer validation cross-browser

【解决方案1】：

如果你给<option>标签明确的“值”属性，它会起作用。

<option value='---'>---</option>

我不清楚为什么它在 IE7 而不是 IE8 中失败。

【讨论】：

【解决方案2】：

似乎是一个验证器错误。但作为一种解决方法，您可以考虑选择元素并获取值。看到这个，在 IE7 上工作：

jQuery.validator.addMethod("notEqual", function(value, element, param) {
    return this.optional(element) || $(element).val() !== param;
}, "Please choose some value!");

【讨论】：

很好，我找到了 element.item(element.selectedIndex).text != param;但你的解决方案更干净——我对使用 jQuery 比较陌生——我尝试使用 element.val() 但这没有用，没有意识到我需要使用 $(element) 来获取 jquery'化版本，但这是有道理的。

【解决方案3】：

这是因为你的选项都没有价值。

    <option value='---'>---</option>
    <option value='Category 1'>Category 1</option>
    <option value='Category 2'>Category 2</option>
    <option value='Category 3'>Category 3</option>

【讨论】：

【解决方案4】：

您在 id 和 name 中使用了“文本”一词。

“文本”这个词并不是专门“保留”，但它是那些“最好避免的词”之一...

http://www.kourbatov.com/faq/reserved.htm

另外，Validation plugin 仅在 jQuery 版本 1.6.1 之前进行了测试

降级您的 jQuery 版本只是为了排除 jQuery 1.7 的问题

【讨论】：

感谢您的提示——我当然不会在常规代码中使用 text 这个词，或者一般情况下甚至不会在测试示例中使用这个词——这个是从分叉别人的 jsfiddle 开始的 :)——我试过了顺便说一句，使用早期版本的 jQuery，它们也是一个问题——看起来像 I.E.处理选项值的东西与其他浏览器（IE 9 之前）有点不同

【解决方案5】：

猜猜这应该可行

<html>
<head>
    <script src="jquery-1.7.js" type="text/javascript"></script>
    <script src="jquery.validate-1.9.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
    $('#myForm').validate({
      rules: {
          text: {
              required: true
          },
          category: {
              required: true
          }
      },
      messages: {
          text: {
              required: "Text required"
          },
          category: {
              required: "Category required"
          }
      }
  });
});
    </script>
<form id="myForm">
    <select id="category" name="category">
        <option value="">---</option>
        <option value="Category 1">Category 1</option>
        <option value="Category 2">Category 2</option>
        <option value="Category 3">Category 3</option>
    </select>
    <input type="text" id="text" name="text" />
    <input type="submit" value="Test" />
</form
</body>
</html>

【讨论】：