Web/API/GlobalEventHandlers/oninvalid

The oninvalid property of the GlobalEventHandlers mixin is an EventHandler that processes invalid events.

The invalid event fires when a submittable element has been checked and doesn't satisfy its constraints. The validity of submittable elements is checked before submitting their owner form, or after the checkValidity() method of the element or its owner form is called.

Syntax

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

Value

functionRef is a function name or a function expression. The function receives a Event object as its sole argument.

Example

This example demonstrates oninvalid and onsubmit event handlers on a form.

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();
}

Result

Specification

Specification	Status	Comment
HTML Living StandardThe definition of 'oninvalid' in that specification.	Living Standard

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`oninvalid`	Chrome Full support Yes	Edge Full support ≤79	Firefox Full support Yes	IE ?	Opera Full support Yes	Safari ?	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS ?	Samsung Internet Android Full support Yes

Legend

Full support: Full support
Compatibility unknown: Compatibility unknown