oninvalid
は GlobalEventHandlers
ミックスインのプロパティで、invalid
イベントを処理するイベントハンドラー
です。
invalid
イベントは、送信可能な要素が検証され、条件を満たしていない場合に発生します。送信可能な要素の有効性は、フォームを送信する前、またはフォームの checkValidity()
メソッドが呼び出された後に検証されます。
構文
target.oninvalid = functionRef; var functionRef = target.oninvalid;
値
例
この例は、フォーム上の oninvalid
と onsubmit
イベントハンドラーを示しています。
HTML
<form id="form">
<p id="error" hidden>Please fill out all fields.</p>
<label for="city">City</label>
<input type="text" id="city" required>
<button type="submit">Submit</button>
</form>
<p id="thanks" hidden>Your data has been received. Thanks!</p>
JavaScript
const form = document.getElementById('form');
const error = document.getElementById('error');
const city = document.getElementById('city');
const thanks = document.getElementById('thanks');
city.oninvalid = invalid;
form.onsubmit = submit;
function invalid(event) {
error.removeAttribute('hidden');
}
function submit(event) {
form.setAttribute('hidden', '');
thanks.removeAttribute('hidden');
// For this example, don't actually submit the form
event.preventDefault();
}
結果
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
HTML Living Standard oninvalid の定義 |
現行の標準 |
ブラウザー実装状況
BCD tables only load in the browser
関連情報
invalid
event- DOM onevent ハンドラー