html5表单验证modernizr safari

Question

这是工作示例: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'
});

Answer 1

Modernizr之所以说Safari 5支持电子邮件/必需属性,是因为它们受支持并且您可以使用约束验证API(即input.checkValidity(),input.validity等).Safari浏览器5.0.x中没有验证的用户界面,这是什么原因,为什么他们已经关闭了所谓的交互式表单验证(=防止提交和表示errormessage的,如果验证失败).

实际上,你的浏览器嗅探是不对的.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'
});

您可以在此处找到有关表单验证的一些额外测试.

更新:Modernizr现在具有用于交互式约束验证的附加功能检测