最新のWeb開発のチュートリアル
 

oninvalidイベント

イベントオブジェクト参照 イベントオブジェクト

入力フィールドが無効な場合、いくつかのテキストを警告:

<input type="text" oninvalid="alert('You must fill out the form!');" required>
»それを自分で試してみてください

もっと"Try it Yourself"以下の例。


定義と使用法

submittableときoninvalidイベントが発生した<input>要素が無効です。

たとえば、入力フィールドが無効であるrequired属性が設定され、フィールドが空である(されてrequired属性は、入力フィールドがフォームを送信する前に記入しなければならないことを指定します)。


ブラウザのサポート

表中の数字は完全にイベントをサポートする最初のブラウザのバージョンを指定します。

イベント
oninvalid はい 10.0 はい サポートされていません はい

構文

HTMLには:

JavaScriptで:

object .oninvalid=function(){ »それを自分で試してみてください

JavaScriptでは、使用してaddEventListener()メソッドを:

object .addEventListener("invalid", myScript );
»それを自分で試してみてください

注: addEventListener()メソッドは、Internet Explorer 8およびそれ以前のバージョンでサポートされていません。


技術的な詳細

バブル: ノー
取消し可能: はい
イベントの種類: イベント
サポートされているHTMLタグ: <入力>
DOMバージョン: レベル3のイベント
例

その他の例

入力フィールドが6未満の文字が含まれている場合、いくつかのテキストを警告:

Name: <input type="text" id="myInput" name="fname" pattern=".{6,}">

<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);

function myFunction() {
    alert("Must contain 6 or more characters");
}
</script>
»それを自分で試してみてください

入力フィールドが5未満2以上の多数が含まれている場合、いくつかのテキストを警告:

Number: <input type="number" id="myInput" name="quantity" min="2" max="5">

<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のフォーム


<イベントオブジェクト