jquery - 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 中它不起作用，modernizr 似乎在测试 html5 兼容性时返回 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 支持 email/required 属性的原因是它们受支持并且您可以使用约束验证 API(即 input.checkValidity()、input.validity 等)。 Safari 5.0.x 没有验证 UI，这就是他们关闭所谓的交互式表单验证的原因(= 阻止提交并在验证失败时显示错误消息)。

实际上，您的浏览器嗅探不正确。 Chrome 已经通过验证支持 HTML5，Safari 6 也将支持它。这表示可能更适合 future ，可能看起来像这样:

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