html5 表单验证modernizr safari答案

【问题标题】：html5 form validation modernizr safarihtml5 表单验证modernizr safari
【发布时间】：2011-08-27 04:41:10
【问题描述】：

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

【问题讨论】：

这很奇怪..你应该把它报告给 paul irish.. :) ..btw，要解决这个问题，你可以检查浏览器是否是 safari 并将其添加到测试中。
是的，我要用 html5 + javascript 向 Paul.how 报告？或者你的意思是服务器端的方式？
这是一个简单的 JS 检查.. 像 var isSafari = navigator.userAgent.toLowerCase().indexOf('safari') .. 或者使用 jQuery 浏览器检测.. 如果你在测试中添加这个，即测试：Modernizr.... & ... & ... & !isSafari 。再见！ :)
Modernizr.input.required 几乎难以实现，它检查 Safari（不验证 html5）和 Opera11（验证但不验证样式）都需要检查

标签： jquery html safari modernizr

【解决方案1】：

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'
});

你可以找到一些额外的tests regarding form validation here。

更新：Modernizr 现在有一个额外的功能检测interactive constraint validation

【讨论】：

【解决方案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'
});

【讨论】：

【解决方案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

【讨论】：