Html HTML5 输入验证在 IE8 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7959955/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 input validation doesn't work in IE8
提问by woody
Hello kind people of the internet, I've been hacking at this for a while...and have seen several similar postings, but I can't seem to figure this out:
你好，互联网上的好心人，我已经在这方面进行了一段时间的黑客攻击......并且看到了几个类似的帖子，但我似乎无法弄清楚这一点：
The HTML5 input field validation CSS works in Firefox, Chrome...but alas, not in IE8...and much of my target audience will be using IE8.
HTML5 输入字段验证 CSS 可在 Firefox、Chrome 中使用……但可惜，不适用于 IE8……而且我的大部分目标受众将使用 IE8。
...and yes: I'm using Modernizr, and I used Initializr to get the page template and CSS...I'm a bit confused why I can't get things working properly in IE8.
...是的：我正在使用 Modernizr，并且我使用 Initializr 来获取页面模板和 CSS...我有点困惑为什么我无法在 IE8 中正常工作。
Here's a link to my test page: Test html5 page
这是我的测试页面的链接： Test html5 page
The input field is red before proper entry, then validation simply turns green when input a valid account number, such as: 50011111111
输入字段在正确输入之前为红色，然后在输入有效帐号时验证简单地变为绿色，例如：50011111111
The HTML5 code is as follows:
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"/>
Any suggestions on what is probably a fairly simple thing to fix would be mucho appreciated!
任何关于可能是一个相当简单的问题的建议将不胜感激！
回答by Evan
IE just ignors HTML5 elements because it dosen't know about them. From the Modernizr docs
IE 只是忽略 HTML5 元素，因为它不知道它们。来自 Modernizr 文档
Modernizr runs through a little loop in JavaScript to enable the various elements from HTML5 (as well as abbr) for styling in Internet Explorer. Note that this does not mean it suddenly makes IE support the Audio or Video element, it just means that you can use section instead of div and style them in CSS.
Modernizr 在 JavaScript 中运行一个小循环，以启用 HTML5（以及 abbr）中的各种元素在 Internet Explorer 中进行样式设置。请注意，这并不意味着它突然让 IE 支持 Audio 或 Video 元素，这只是意味着您可以使用 section 而不是 div 并在 CSS 中设置它们的样式。
What this says is that Modernizr will tell IE about the new tags in HTML5 so that you can use CSS on them, but dosen't actually make them do anything. Note too that Modernizr dosen't add default styles for the elements, so they recommend you use an HTML5 CSS reset that makes <section>tags display: block;for example.
这意味着 Modernizr 会告诉 IE 有关 HTML5 中的新标签，以便您可以在它们上使用 CSS，但实际上并没有让它们做任何事情。还要注意，Modernizr 不会为元素添加默认样式，因此他们建议您使用 HTML5 CSS 重置，例如制作<section>标签display: block;。
With respect to your form validation topek was correct in explaining that Modernizr only detects browser capability, it dosen't actually do anything about it. The proccess behind Modernizr is that you use the built-in yepnope testing feature to see if the user's browser can do 'x' (in this case form validation) and then conditionally and asynchronously load a script or style to "polyfill" (a polite way of saying 'use javascript to mimic native behaviour) for it.
关于您的表单验证，topek 在解释 Modernizr 仅检测浏览器功能时是正确的，它实际上并没有做任何事情。Modernizr 背后的过程是您使用内置的 yepnope 测试功能来查看用户的浏览器是否可以执行“x”（在本例中为表单验证），然后有条件地异步加载脚本或样式以“polyfill”（礼貌的说'使用javascript来模仿本机行为）的方式。
In your case, you will want to use Modernizr.load()to test for Modernizr.input.requiredand probably Modernizr.input.autofocustoo, like this:
在您的情况下，您将想要使用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(); }
});
And there you go, a pretty stripped-down Modernizr.load. While I find their docs meandering, they actually are very good. Every time I've had a problem and tweeted at Paul Irish, he's sent back a link to the docs where I actually did find my answer upon closer inspection.
就这样，一个非常精简的 Modernizr.load。虽然我发现他们的文档很曲折，但实际上它们非常好。每次我遇到问题并向 Paul Irish 发推文时，他都会发回一个指向文档的链接，在那里我确实在仔细检查后找到了答案。
Validation is one of the most complex HTML5 features for the browser makers to implement as a standard. While I really like it's simplicity, I've been continuing to use jQuery.validate in all cases except if the user has Chrome or Opera - the FF native validate is weak still. I'd recommend you stick with jQuery for now.
验证是浏览器制造商作为标准实施的最复杂的 HTML5 功能之一。虽然我真的很喜欢它的简单性，但我一直在所有情况下继续使用 jQuery.validate，除非用户使用 Chrome 或 Opera - FF 本机验证仍然很弱。我建议你现在坚持使用 jQuery。
回答by Wu Nianying
I recently found a new plugin jquery.h5form.
我最近发现了一个新插件jquery.h5form。
Using this, form validation, like in Opera, will be enabled in all browsers, even IE8.
使用它，表单验证，就像在 Opera 中一样，将在所有浏览器中启用，甚至 IE8。
回答by topek
I think, what you are still missing, is a html5 polyfill for the field validation. You could use for example: http://ericleads.com/h5validate/
我认为，您仍然缺少的是用于字段验证的 html5 polyfill。您可以使用例如：http: //ericleads.com/h5validate/
More polyfills can be found under: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
更多 polyfill 可以在以下位置找到：https: //github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
回答by James Williams
IE8 does not support all, if any, HTML5 elements. You need to have an addon for html5 to work. One addon is modernizer
IE8 不支持所有 HTML5 元素（如果有）。您需要有一个 html5 插件才能工作。一个插件是现代化的
List of browserswith their score/compatibility in HTML5
浏览器列表及其在 HTML5 中的分数/兼容性
