web-dev-qa-db-ja.com

フォームなしの入力要素のHTML5検証ツールチップを無効にする方法

<form>要素内にinputがある場合は、フォームにnovalidate属性を追加するだけで、HTML5検証ツールチップを無効にできます。ただし、入力はフォーム要素ではありません（angularJSを使用しており、ng-formディレクティブを使用しています）。

invalid イベントをリッスンして送信検証を防ぐことはできますが、検証ツールチップを防ぐことはできません。

これは簡単な JsFiddle で問題を示しています。

angularjshtmlhtml-validation
5
Arashsoft

html5には、入力要素の2つのオプションがあります。

  1. それらを<form>コンテナに入れます。
  2. form属性を入力に追加します。値は、入力が関連付けられている形式のidである必要があります。

オプション＃2を使用すると、DOMのどこかにnovalidateを含む空のフォームを追加し、そのフォームに入力を添付できます。

<form novalidate>
  <p>Input in form with novalidate. This one is fine.</p>
  <input type="email" required>
</form>

<p>Input without form. How to disable validation tooltips? (hover over input to see validation tooltip)</p>
<input type="email" required form="novalidatedform">

<form id="novalidatedform" novalidate />

MDN Webサイト のinput要素に関する詳細情報。

2
Dekel

Accepted Answerが機能しますが、これを行うもう1つの方法は、入力要素に「title」属性を追加することです。検証メッセージは、title属性のコンテンツで上書きされます。

タイトル属性に意味のあるテキストを追加できます。

<input type="email" title="Your Email">

P.S HTML5では、HTML 4.01とは異なり、title属性を任意のHTML要素で使用できます。

7
Vishnu Nair