HTML5输入验证在IE8中不起作用 [英] HTML5 input validation doesn't work in IE8

问题描述

你好心的互联网用户，
我一直在黑客中徘徊一段时间......并且看到了几个类似的帖子，但我似乎无法弄清楚这一点：

HTML5输入字段验证CSS适用于Firefox，Chrome ...但是唉，不是在IE8中......我的目标受众中的大多数都将使用IE8。

...是的：我使用Modernizr，我用Initializr来获取页面模板和CSS ...我有点困惑为什么我不能让事情正常工作在IE8中。

以下是我的测试页面的链接：
测试html5页面

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

HTML5代码如下：

 < label for =account>帐号：< / label> 
< input id =accountname =inputAccount
 placeholder =input billing account number
 pattern =/（^ 500）| ^ \ {11} 
需要
自动对焦
 type =text/> 
  

任何有关修复可能相当简单的建议都会非常感激！

解决方案

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

Modernizr通过JavaScript中的一个小循环来启用HTML5中的
各种元素（以及缩写）用于Internet
资源管理器中的样式。请注意，这并不意味着它突然让IE支持
音频或视频元素，它只是意味着您可以使用
节而不是div并在CSS中设置样式。

这就是说Modernizr会告诉IE浏览器有关HTML5中的新标签，以便你可以在它们上使用CSS，但实际上并没有让它们做任何事情。请注意，Modernizr不会添加元素的默认样式，因此他们建议您使用HTML5 CSS重置，使< section> 标签显示：block;例如。

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

在你的情况下，你会想要使用 Modernizr.load（）来测试 Modernizr.input.required 和可能 Modernizr.input.autofocus 这个：

  // modernizr条件加载函数
 Modernizr.load（{
 //指定测试，参考Modernizr文档中的对象名称
 test：Modernizr.input.required&& Modernizr.input.placeholder，
 //指定如果浏览器测试失败该怎么办，可以函数
 nope：'path / to / polyfill / script'，
 //有时你需要运行一些JS来初始化那个脚本
 complete：function（）{polyfillinitor whatever（）;} 
}）; 
  

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

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

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.

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

Here's a link to my test 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

The HTML5 code is as follows:

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

解决方案

IE just ignors HTML5 elements because it dosen't know about them. From the Modernizr docs

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.

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.

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.

In your case, you will want to use Modernizr.load() to test for Modernizr.input.required and probably Modernizr.input.autofocus too, like this:

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

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输入验证在IE8中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！