GlobalEventHandlers.oninvalid
The oninvalid
property of the
GlobalEventHandlers
mixin is an event handler 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
Specifications
Specification |
---|
HTML Standard # handler-oninvalid |
Browser compatibility
BCD tables only load in the browser
See also
invalid
event- DOM on-event handlers