DOM

：

：

HTMLInputElement：invalid イベント

　編集：2022.10.08 by T.A.

[Edge]。→、、

value 値が検証され、結果、妥当でない場合に発行されます。

このイベントは、送信時にフォームの問題の概要を表示するのに役立ちます。フォームが送信されると、無効な各フォーム コントロールで無効なイベントが発生します。送信可能な要素の有効性は、所有者 <form> を送信する前にチェックされます。または、要素またはその所有者 <form> の checkValidity() メソッドが呼び出された後。

blur にはチェックを入れていません。

→Event

バブリング
キャンセル
インターフェイス Event
イベント ハンドラー プロパティ oninvalid
例
mdnより

フォームが無効な値で送信された場合、提出可能な要素がチェックされ、エラーが見つかった場合、無効な要素で無効なイベントが発生します。この例では、入力の無効な値が原因で無効なイベントが発生すると、無効な値がログに記録されます。

HTML： 

<form action="#">
  <div>
    <label>
      Enter an integer between 1 and 10:
      <input type="number" min="1" max="10" required />
    </label>
  </div>
  <div><input type="submit" value="submit" /></div>
</form>
<hr />
Invalid values:
<ul id="log"></ul>

JavaScript： 

const input = document.querySelector('input')
const log = document.getElementById('log')

input.addEventListener('invalid', (e) => {
  log.appendChild(Object.assign(
    document.createElement('li'),
    { textContent: JSON.stringify(e.target.value) }
  ))
})

HTML： 

<FORM action="JavaScript:void(0)">
  数値を入れてください：<BR>
  <INPUT id=IdTest type=number min=3 max=10>
  <BUTTON type=submit>送信</BUTTON>
</FORM>
<SPAN id=IdLog></SPAN>

JavaScript： 

function Job(eve){  //invalidイベントの処理：
  D=eve; //＝[object]：[object Event]

詳細	//isTrusted＝[boolean]：true
	//type＝[string]：invalid
	//target＝[object]：[object HTMLInputElement]
	//currentTarget＝[object]：null
	//eventPhase＝[number]：0
	//bubbles＝[boolean]：false
	//cancelable＝[boolean]：true
	//defaultPrevented＝[boolean]：false
	//composed＝[boolean]：false
	//…


  let E=eve.target; //イベントが起きた要素の取得。
  IdLog.innerHTML="値："+ E.value; //表示。
}
IdTest.oninvalid=Job; //invalidイベントを割り当てる。
テスト