6

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

3 回答 3

8

Modernizr 说 Safari 5 支持 email/required 属性的原因是它们受支持并且您可以使用约束验证 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'
});

你可以在这里找到一些关于表单验证的额外测试。

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

于 2011-05-19T20:37:06.783 回答
1

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

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

jQuery 浏览器 API

于 2012-10-23T22:02:16.173 回答
1

实际上我没有找到只使用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'
});
于 2011-05-17T14:04:00.763 回答