6

これは実際の例です：http： //jsfiddle.net/trustweb/sTSMW/

サファリ5.05を使用してエラーに気づきました

html5ページのようにフォームを設定し、modernizrがテストに失敗した場合に、jqueryで機能を補充した場合：

Modernizr.inputtypes.email && Modernizr.input.required && Modernizr.input.placeholder

他のブラウザ（Firefox、Chrome、Opera）では、ブラウザがフォームを検証します

つまり、jqueryは検証関数を置き換えます

サファリでは機能しません。html5の互換性をテストしている間、modernizrは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が電子メール/必須属性がSafari5でサポートされていると言う理由は、それらがサポートされており、制約検証API（つまり、input.checkValidity（）、input.validityなど）を使用できるためです。Safari 5.0.xには検証UIがありません。これが、いわゆるインタラクティブフォーム検証をオフにした理由です（=検証が失敗した場合、送信を禁止し、エラーメッセージを表示します）。

実際、ブラウザのスニッフィングは正しくありません。Chromeはすでに検証からHTML5をサポートしており、Safari6もそれをサポートします。これは、より将来性のある可能性があると述べ、次のようになります。

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だけで行う方法が見つからなかったので、このチェックを実装しました。

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 に答える
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 に答える