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没有验证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的其他功能检测

Answer 2

实际上我没有找到如何使用modernizr，所以我实现了这个检查：

var browser=navigator.userAgent.toLowerCase();
if (browser.indexOf("safari") != -1 && browser.indexOf("chrome") == -1) browser='safari';


yepnope(
{
    test : Modernizr.inputtypes.email && Modernizr.input.required && Modernizr.input.placeholder && browser!='safari',
    nope : 'javascript/webforms_home.js'
});

Answer 3

这就是我解决同样问题的方法。它使用Modernizr，yepnope和jQuery。

    yepnope({
       test : Modernizr.inputtypes.email && Modernizr.input.required && 
              Modernizr.input.placeholder && && !jQuery.browser.safari,
       nope : ['js/webforms_home.js']
    });

jQuery Browser API

html5表单验证modernizr safari

3 个答案: