備忘録的プログラミングリファレンス

invalid ( oninvalid )イベント

 invalid ( oninvalid )イベントは、form の送信時に <input> エレメントの値が無効な場合に発生するイベントです。
 例えば、エレメントに required 属性が設定されていてフィールドが空の場合、送信時に invalid イベントが発生します。

required 属性と invalid ( oninvalid )イベント
<input type="text" oninvalid="alert('入力が必須フィールドがあります');" required />

 以下は addEventListener() で invalid イベントを追加設定する方法です。

invalid イベントを追加( oninvalid イベントハンドラーとして追加)
document.getElementsByTagName('form')[0].addEventListener("invalid", (event)=>{
	console.log( 'event type : ' + event.type );
});

詳しくは Example を参照してください

ページ内 Index

構文(Syntax)

in HTML

<tagelement oninvalid="function()">

in JavaScript

object.oninvalid = function(){ };

object.addEventListener("invalid", script_);

備考(Remarks)

BubblesNo
CancelableYes
InterfaceEvent
Supported HTML Elements<input>

Example

 invalid ( oninvalid )イベントの例です。

 以下の入力項目に8文字以上を入力し送信を実行してみてください。8文字以内の場合はアラートが出ます。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。