HTML5フォーム要素の検証を無効にする

私のフォームでは、たとえば新しいHTML5フォームタイプを使用したいと思います<input type="url" />（タイプの詳細はこちら）。

問題は、Chromeが非常に役に立って、私にとってこれらの要素を検証したいということです。組み込みの検証に失敗した場合、要素がフォーカスを取得する以外にメッセージや指示はありません。私はURL要素にを事前に入力している"http://"ため、独自のカスタム検証ではこれらの値を空の文字列として扱うだけですが、Chromeでは拒否されます。検証ルールを変更できれば、それも機能します。

私は使用に戻すことができることはわかってtype="text"いますが、これらの新しいタイプのオファーを使用して素晴らしい拡張が必要です（例：モバイルデバイスのカスタムキーボードレイアウトに自動的に切り替わります）：

それで、自動検証をオフにするか、カスタマイズする方法はありますか？

HTML5のフォームのクライアント側の検証を無効にする場合は、フォーム要素にnovalidate属性を追加します。例：

<form method="post" action="/foo" novalidate>...</form>

https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidateを参照してください

私は仕様を読み、Chromeでいくつかのテストを行いました。「無効な」イベントをキャッチしてfalseを返すと、フォームを送信できるようです。

このHTMLでjqueryを使用しています。

// suppress "invalid" events on URL inputs
$('input[type="url"]').bind('invalid', function() {
  alert('invalid');
  return false;
});

document.forms[0].onsubmit = function () {
  alert('form submitted');
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="url" value="http://" />
  <button type="submit">Submit</button>
</form>

他のブラウザではこれをテストしていません。

フォームでnovalidate属性を使用すると、ブラウザがフォームを送信できなくなるだけであることを追加したいと思います。ブラウザは引き続きデータを評価し、：validおよび：invalid疑似クラスを追加します。

これがわかったのは、有効な疑似クラスと無効な疑似クラスが、私が使用していたHTML5ボイラープレートスタイルシートの一部だからです。擬似クラスに関連するCSSファイルのエントリを削除しました。誰か他の解決策を見つけた場合はお知らせください。

最良の解決策は、テキスト入力を使用し、inputmode = "url"属性を追加して、URLキーボード機能を提供することです。HTML5仕様はこの目的のために考えられました。type = "url"を維持すると、すべての場合に役立つわけではない構文検証が得られます（非常に寛容であり、あまり役に立たない構文ではなく、404エラーを返すかどうかを確認することをお勧めします）。

また、たとえばより寛容になるように、属性pattern = "https？：//.+"でデフォルトのパターンを上書きする可能性もあります。

フォームにnovalidate属性を指定すると、フォームのすべてのフィールドの検証が削除され、たとえばメールフィールドの検証を維持したい場合があるため、質問に対する正しい回答ではありません。

jQueryを使用して検証を無効にすることも、JavaScriptなしで完全に機能するため、不適切なソリューションです。

私の場合、URL入力の前に2つのオプション（http：//またはhttps：//）を含むselect要素を配置します。これは、Webサイトのみが必要なためです（ftp：//などは不要）。このようにして、この奇妙なプレフィックス（Tim Berners-Leeの最大の後悔であり、URL構文エラーの主な原因である可能性があります）を入力することを避け、プレースホルダー（HTTPなし）を使用した単純なテキスト入力とinputmode = "url"を使用します。jQueryとサーバー側スクリプトを使用して、Webサイトの実際の存在（404なし）を検証し、挿入されている場合はHTTPプレフィックスを削除します（pattern = "^（（？http）。）* $"のようなパターンの使用は避けますより寛容である方が良いと思うので、接頭辞を付けるのを防ぐため）

ブラウザの検証を回避するためにエンドランを実行する代わりhttp://に、プレースホルダテキストとしてを配置できます。これはあなたがリンクしたページそのものです：

プレースホルダーテキスト

HTML5がWebフォームにもたらす最初の改善は、入力フィールドにプレースホルダーテキストを設定する機能ですです。プレースホルダーテキストは、フィールドが空でフォーカスされていない限り、入力フィールド内に表示されます。入力フィールドをクリック（またはタブ移動）するとすぐに、プレースホルダーのテキストが消えます。

以前にプレースホルダーテキストを見たことがあるでしょう。たとえば、Mozilla Firefox 3.5では、ロケーションバーに「ブックマークと履歴の検索」というプレースホルダーテキストが含まれるようになりました。

ロケーションバーをクリック（またはタブで移動）すると、プレースホルダーテキストが非表示になります。

皮肉なことに、Firefox 3.5は独自のWebフォームへのプレースホルダーテキストの追加をサポートしていません。C'est la vie。

プレースホルダーのサポート

IE  FIREFOX SAFARI  CHROME  OPERA   IPHONE  ANDROID
·   3.7+    4.0+    4.0+    ·       ·       ·

独自のWebフォームにプレースホルダーテキストを含める方法は次のとおりです。

<form>
  <input name="q" placeholder="Search Bookmarks and History">
  <input type="submit" value="Search">
</form>

placeholder属性をサポートしていないブラウザは、単にそれを無視します。害、ファウルはありません。ブラウザがプレースホルダテキストをサポートしているかどうかを確認します。

ユーザーに「開始点」を提供しないため、まったく同じではありませんが、少なくとも半分はそこにあります。

私は、CSSを備えたChromeのソリューションを見つけました。これは、非常に便利なネイティブ検証フォームをバイパスせずに、この次のセレクターです。

form input::-webkit-validation-bubble-message, 
form select::-webkit-validation-bubble-message,
form textarea::-webkit-validation-bubble-message {
    display:none;
} 

このようにして、メッセージをカスタマイズすることもできます...

私はこのページで解決策を得ました：http : //trac.webkit.org/wiki/Styling%20Form%20Controls

フォームでnovalidateを使用するだけです。

<form name="myForm" role="form" novalidate class="form-horizontal" ng-hide="formMain">

乾杯！！！

以下は、novalidateを使用している場合でも、chromeとoperaが無効な入力ダイアログを表示しないようにするために使用する関数です。

window.submittingForm = false;
$('input[novalidate]').bind('invalid', function(e) {
    if(!window.submittingForm){
        window.submittingForm = true;
        $(e.target.form).submit();
        setTimeout(function(){window.submittingForm = false;}, 100);
    }
    e.preventDefault();
    return false;
});

JavaScriptを追加して、これらの厄介な検証バブルを抑制し、独自のバリデーターを追加できます。

document.addEventListener('invalid', (function(){
    return function(e) {
      //prevent the browser from showing default error bubble / hint
      e.preventDefault();
      // optionally fire off some custom validation handler
      // myValidation();
    };
})(), true);

あなたは、としてフォーム要素をマークするとrequired=""、その後novalidate=""は役立ちません。

required検証を回避する方法は、要素を無効にすることです。

シンプルなChrome拡張機能をインストールして、その場で検証を無効にするだけです https://chrome.google.com/webstore/detail/html5-form-validation-err/dcpagcgkpeflhhampddilklcnjdjlmlb/related

デフォルトではすべてがデフォルトとして機能しますが、ツールバーの拡張アイコンをシングルクリックすることでhtml5検証を無効にすることができます