--- title: GlobalEventHandlers.oninvalid slug: Web/API/GlobalEventHandlers/oninvalid tags: - API - Event Handler - GlobalEventHandlers - Property - Reference translation_of: Web/API/GlobalEventHandlers/oninvalid ---
{{ ApiRef("HTML DOM") }}

oninvalid は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("invalid")}} イベントを処理する{{domxref("EventHandler", "イベントハンドラー")}}です。

invalid イベントは、送信可能な要素が検証され、条件を満たしていない場合に発生します。送信可能な要素の有効性は、フォームを送信する前、またはフォームの checkValidity() メソッドが呼び出された後に検証されます。

構文

target.oninvalid = functionRef;
var functionRef = target.oninvalid;

値

functionRef は、関数名または関数式です。この関数は、{{domxref("Event")}} オブジェクトを唯一の引数として受け取ります。

例

この例は、フォーム上の oninvalid と {{domxref("GlobalEventHandlers.onsubmit", "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();
}

結果

{{EmbedLiveSample("Example")}}

仕様

仕様書 策定状況 コメント
{{SpecName('HTML WHATWG','#handler-oninvalid','oninvalid')}} {{Spec2('HTML WHATWG')}}

ブラウザー実装状況

{{Compat("api.GlobalEventHandlers.oninvalid")}}

関連情報