oninvalidイベント
例
入力フィールドが無効な場合は、いくつかのテキストに警告します。
<input type="text" oninvalid="alert('You must fill out the form!');" required>
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
oninvalidイベントは、submittable <input>要素が無効な場合に発生します。
たとえば、必須属性が設定されていてフィールドが空の場合、入力フィールドは無効です(必須属性は、フォームを送信する前に入力フィールドに入力する必要があることを指定します)。
ブラウザのサポート
表の数字は、イベントを完全にサポートする最初のブラウザーバージョンを示しています。
Event | |||||
---|---|---|---|---|---|
oninvalid | Yes | 10.0 | Yes | Yes | Yes |
構文
HTMLの場合:
<element oninvalid="myScript">
JavaScriptの場合:
object.oninvalid = function(){myScript};
JavaScriptでは、addEventListener()メソッドを使用します。
object.addEventListener("invalid", myScript);
注: addEventListener ()メソッドは、Internet Explorer8以前のバージョンではサポートされていません。
技術的な詳細
泡: | 番号 |
---|---|
キャンセル可能: | はい |
イベントタイプ: | イベント |
サポートされているHTMLタグ: | <入力> |
DOMバージョン: | レベル3のイベント |
その他の例
例
入力フィールドに含まれる文字が6文字未満の場合、一部のテキストに警告します。
Name: <input type="text" id="myInput" name="fname" pattern=".{6,}"
required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
alert("Must contain 6 or more characters");
}
</script>
例
入力フィールドに2未満または5より大きい数値が含まれている場合は、一部のテキストに警告します。
Number: <input type="number" id="myInput" name="quantity" min="2" max="5"
required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
alert("You must pick a number between 2 and 5. You chose: " + this.value);
}
</script>
関連ページ
JavaScriptチュートリアル:JavaScriptフォーム