invalid ( oninvalid )イベント
invalid ( oninvalid )イベントは、<input>エレメントの送信時に無効な値がある場合に発生するEventインターフェイスのイベントタイプです。
例えば、エレメントに required 属性が設定されていてフィールドが空の場合、送信時にinvalidイベントが発生します。
<input type="text" oninvalid="alert('入力が必須フィールドがあります');" required />
以下は addEventListener() で invalid イベントを追加設定する方法です。
document.getElementsByTagName('form')[0].addEventListener("invalid", (event)=>{ console.log( 'event type : ' + event.type ); });
ページ内 Index
構文(Syntax)
in HTML
<tagelement oninvalid="function()">
in JavaScript
object.oninvalid = function(){ }; object.addEventListener("invalid", script_);
備考(Remarks)
Bubbles | No |
Cancelable | Yes |
Interface | Event |
Supported HTML Elements | <input> |
Example
invalid ( oninvalid )イベントの例です。
以下の入力項目に8文字以上を入力し送信
を実行してみてください。8文字以内の場合はアラートが出ます。
<form> に関連するイベント
以下は、<form> に関するイベントです。
イベント | 概要 |
---|---|
beforeinput () | 入力が起きたら |
change ( onchange ) | <FORM>部品において、別の場所をクリックしたり、Tabキーで他にフォーカスが映ると発生 |
formdata ( onformdata ) | <form> を送信したとき |
input ( oninput ) | <FORM>部品において入力値が変化したら |
invalid ( oninvalid ) | <input>エレメントの送信時に無効な値がある場合に |
reset ( onreset ) | <FORM>部品においてリセットされたら |
submit ( onsubmit ) | <FORM>においてフォームが送信されたら |
blur ( onblur ) | ポップアップなどによってWindow、Document、各エレメントがフォーカスを失ったら |
focus ( onfocus ) | Window、Document、各エレメントがフォーカスされたら |