这是工作示例:
http://jsfiddle.net/trustweb/sTSMW/
http://jsfiddle.net/trustweb/sTSMW/
我注意到使用safari 5.05的错误
如果我在html5页面中设置一个表单,并且如果modernizr在测试中失败,我将使用jquery来补充功能:
Modernizr.inputtypes.email && Modernizr.input.required && Modernizr.input.placeholder
与其他浏览器(firefox,chrome和opera)一起,浏览器验证表单
在ie jquery中替换验证函数
在safari中它不起作用,在测试html5兼容性时,modernizr似乎返回true:
yepnope( { test : Modernizr.inputtypes.email && Modernizr.input.required && Modernizr.input.placeholder,nope : 'http://www.trustweb.it/webforms_home.js' });
解决方法
Modernizr之所以说Safari 5支持电子邮件/必需属性,是因为它们受支持并且您可以使用约束验证API(即input.checkValidity(),input.validity等). Safari 5.0.x没有验证UI,这就是为什么他们关闭所谓的交互式表单验证(=如果验证失败则阻止提交并显示错误消息)的原因.
实际上,你的浏览器嗅探是不对的. Chrome已经通过验证支持HTML5,Safari 6也支持它.这表示可能更具未来性,可能如下所示:
yepnope( { test : Modernizr.inputtypes.email && Modernizr.input.required && Modernizr.input.placeholder && ( !$.browser.webkit || parseInt($.browser.version,10) > 533),nope : 'javascript/webforms_home.js' });
你可以找到一些额外的tests regarding form validation here.
更新:Modernizr现在有一个额外的功能检测interactive constraint validation