GlobalEventHandlers.oninvalid

U leest de Engelstalige versie van deze inhoud, omdat er nog geen vertaling voor deze taal beschikbaar is. Help ons dit artikel te vertalen!

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 Standard
The definition of 'oninvalid' in that specification.
Living Standard  

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
oninvalidChrome Full support YesEdge ? Firefox Full support YesIE ? Opera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android Full support Yes

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

See also