HTML5 输入验证在 IE8 中不起作用答案

【问题标题】：HTML5 input validation doesn't work in IE8HTML5 输入验证在 IE8 中不起作用
【发布时间】：2011-10-31 21:27:10
【问题描述】：

您好，互联网上的好心人，我已经对此进行了一段时间的破解......并且已经看到了几个类似的帖子，但我似乎无法弄清楚：

HTML5 输入字段验证 CSS 可在 Firefox、Chrome 中使用……但可惜，在 IE8 中不起作用……而且我的大部分目标受众都将使用 IE8。

...是的：我正在使用 Modernizr，并且我使用 Initializr 来获取页面模板和 CSS...我有点困惑为什么我无法在 IE8 中正常工作。

这是我的测试页面的链接： Test html5 page

输入字段在正确输入之前为红色，然后在输入有效帐号时验证仅变为绿色，例如： 50011111111

HTML5代码如下：

<label for="account">Account Number: </label> 
<input id="account" name="inputAccount" 
  placeholder="input billing account number" 
  pattern="/(^500)|^\d{11}" 
  required
  autofocus
  type="text"/>

任何关于什么可能是一个相当简单的修复问题的建议将不胜感激！

【问题讨论】：

查看jQuery Tools Validator，它将在您的表单输入中使用 HTML5 属性进行验证，并且与 IE7、IE8 及更高版本兼容。
对我来说 formality 也适用于 IE6。
@apaidnerd 链接无效
@Patriks 链接无法正常工作，得到 404

标签： html internet-explorer-8 modernizr

【解决方案1】：

IE 只是忽略 HTML5 元素，因为它不知道它们。来自 Modernizr 文档

Modernizr 在 JavaScript 中运行一个小循环来启用来自 HTML5（以及缩写）的各种元素，用于在 Internet 中进行样式设置探险家。请注意，这并不意味着它突然使 IE 支持音频或视频元素，它只是意味着您可以使用部分而不是 div 并在 CSS 中设置样式。

这意味着 Modernizr 将告诉 IE HTML5 中的新标签，以便您可以在它们上使用 CSS，但实际上并没有让它们做任何事情。另请注意，Modernizr 不会为元素添加默认样式，因此他们建议您使用 HTML5 CSS 重置，例如使<section> 标记为display: block;。

关于您的表单验证，topek 在解释 Modernizr 仅检测浏览器功能时是正确的，但它实际上并没有做任何事情。 Modernizr 背后的过程是您使用内置的 yepnope 测试功能来查看用户的浏览器是否可以执行“x”（在本例中为表单验证），然后有条件地和异步地将脚本或样式加载到“polyfill”（礼貌说'使用javascript来模仿本机行为）的方式。

在您的情况下，您将希望使用Modernizr.load() 来测试Modernizr.input.required，也可能还需要Modernizr.input.autofocus，如下所示：

 //the modernizr conditional load function
 Modernizr.load({
     //specify the tests, refer to the Modernizr docs for object names
   test: Modernizr.input.required && Modernizr.input.placeholder,
     //specify what to do if the browser fails the test, can be a function
   nope: 'path/to/polyfill/script',
     //sometimes you need to run some JS to init that script
   complete: function(){ polyfillinitorwhatever(); }
 });

你去吧，一个相当精简的 Modernizr.load。虽然我发现他们的文档曲折，但它们实际上非常好。每次我遇到问题并在 Paul Irish 上发推文时，他都会发回一个文档链接，我在仔细检查后确实找到了我的答案。

验证是浏览器制造商作为标准实施的最复杂的 HTML5 功能之一。虽然我真的很喜欢它的简单性，但我在所有情况下都继续使用 jQuery.validate，除非用户有 Chrome 或 Opera - FF 原生验证仍然很弱。我建议你现在坚持使用 jQuery。

【讨论】：

【解决方案2】：

我最近发现了一个新插件jquery.h5form。

使用这个，表单验证，就像在 Opera 中一样，将在所有浏览器中启用，即使是 IE8。

【讨论】：

还有一个formality，我们只需要包含JavaScript文件就可以了。也适用于 IE6。
但形式上只给出redbox，不指定消息
您好，我只是想对形式投反对票。我使用它很好，但实际上它在 IE11 的 IE8 仿真中没有出错，但在真正的 IE8 中出错，然后它所做的一切都是 redbox，它甚至没有正确验证。我使用的是最大、最小、步进验证，它在所有浏览器中都能正常工作，包括 IE 仿真，因为我已经有一些 IE8 polyfill 并且正在使用旧 JS，一切都通过 jQuery validate 和不显眼的验证进行了很好的验证。然而，形式却把事情搞砸了，只告诉我一个红框，没有错误消息，也不知道为什么要这样做。删除，np

【解决方案3】：

我认为，您仍然缺少的是用于字段验证的 html5 polyfill。例如，您可以使用：http://ericleads.com/h5validate/

更多 polyfill 可以在以下位置找到：https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

【讨论】：

嗨，非常感谢您的反馈...我会尝试上面的一些解决方案。嗯......但我已经在使用/引用 Modernizr，我认为它可以解决所有这些跨浏览器问题，以便原生 HTML5 在各种浏览器中透明地工作，非常愚蠢的问题：为什么不是Modernizr 在 IE8 中工作？如果 Modernizer 在 IE 中不起作用，它有什么用？还是我可能只是没有正确使用 Modernizr？

【解决方案4】：

IE8 不支持所有（如果有的话）HTML5 元素。您需要一个插件才能使 html5 正常工作。一个插件是modernizer

List of browsers 在 HTML5 中的得分/兼容性

【讨论】：

我的页面引用了 Modernizr ......这就是这篇文章的重点。我很困惑为什么 Modernizr 似乎不起作用......
Modernizer 不会做这项工作，它只是检查浏览器具有哪些功能。你需要一个 polyfill，看我的回答。
如果你去modernizr.com/download，你可以下载包含polyfill的modernizer。