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

Question

你好,互联网的人,我一直在讨厌这个...并且已经看过几个类似的贴子,但我似乎无法弄清楚这一点:

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

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

这是我的测试页面的链接: 测试html5页面

输入字段在正确输入之前为红色,然后在输入有效帐号时验证将变为绿色,例如: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"/>

关于什么可能是一个相当简单的修复建议的任何建议将非常感激!

Answer 1

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

Modernizr在JavaScript中运行一个小循环,以启用HTML5(以及abbr)中的各种元素,以便在Internet Explorer中进行样式设置.请注意,这并不意味着它突然使IE支持Audio或Video元素,它只是意味着您可以使用section而不是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.虽然我发现他们的文档蜿蜒,但实际上他们非常好.每当我遇到问题并在保罗爱尔兰语发推文时,他都会发回一个链接到文档,我确实在仔细检查后找到了答案.

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

Answer 2

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

更多的polyfills可以在下面找到： https: //github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills