web-dev-qa-db-ja.com

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

私のフォームでは、私は新しいHTML5フォームタイプを使いたいと思います。例えば、<input type="url" />（ ここでタイプに関するより多くの情報 ）。

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

私はtype="text"を使用することに戻すことができることを知っていますが、これらの新しいタイプを使用したNiceの機能強化が欲しいのです（例えば：それは自動的にモバイル機器のカスタムキーボードレイアウトに切り替わります）

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

validationformshtml5input
399
nickf

HTML5でフォームのクライアント側の検証を無効にしたい場合は、form要素にnovalidate属性を追加してください。例：

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

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

712
Jakob S

私はその仕様を読み、Chromeでいくつかのテストをしました、そしてあなたが "invalid"イベントをキャッチして、フォーム送信を許すように思われる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>

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

32
Ben Boyle

私はちょうどあなたのフォームでnovalidate属性を使用することがブラウザがフォームを送信することを防ぐだけであることを加えたいと思いました。ブラウザはまだデータを評価し、：validおよび：invalid擬似クラスを追加します。

これは、有効な擬似クラスと無効な擬似クラスが、これまで使用してきたHTML5定型スタイルシートの一部であるためです。疑似クラスに関連するCSSファイルのエントリを削除したばかりです。他の解決策を見つけた人がいたら教えてください。

20
BFTrick

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

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

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

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

enter image description here

ロケーションバーをクリック（またはタブ）すると、プレースホルダのテキストが消えます。

enter image description here

皮肉なことに、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属性をサポートしていないブラウザは単に無視します。無害、無害。 お使いのブラウザがプレースホルダテキストをサポートしているかどうかを確認してください 。

それはユーザーにその「出発点」を提供しないのでそれは正確に同じではないでしょう、しかしそれは少なくともそこに中途半端です。

14
John Kugelman

最善の解決策は、テキスト入力を使用し、URLキーボード機能を提供するために属性inputmode = "url"を追加することです。 HTML 5仕様はこの目的のために考えられました。 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）。）* $"のようなパターンは使用しません）。私はそれがより寛容であることがより良いと思うので接頭辞を置くのを防ぐために）

13
plancton

私は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

9
Val Entin

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

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

乾杯！！！

5
brainSquezer

これは、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;
});
0
Tony Brix