我一直在讨厌这个问题……并且看过几个类似的贴子,但我似乎无法弄清楚这一点：
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"/>
关于什么可能是一个相当简单的修复建议的任何建议将非常感激！
解决方法
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会告诉IE有关HTML5中的新标签,以便你可以在它们上使用CSS,但实际上并没有让它们做任何事情.另请注意,Modernizr不会为元素添加默认样式,因此他们建议您使用HTML5 CSS重置,使< section>标签显示：块;例如.
关于你的表单验证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.