oninvalid Event

DOM Events Event Object

Definition and Usage

The oninvalid event occurs when a validatable <input> element is invalid.

For example, if the required attribute is set and the field is empty, the input field is invalid (the required attribute specifies that the input field must be filled out before submitting the form).

Instance

Example 1

If the input field is invalid, prompt some text:

<input type="text" oninvalid="alert('You must fill out the form!');" required>

Try It Yourself

More TIY examples are at the bottom of the page.

Syntax

In HTML:

<element oninvalid="myScript">

Try It Yourself

In JavaScript:

object.oninvalid = function(){myScript};

Try It Yourself

In JavaScript, use the addEventListener() method:

object.addEventListener("invalid", myScript);

Try It Yourself

Note:Internet Explorer 8 or earlier versions do not support addEventListener() method.

Technical details

Bubble: Not supported
Cancelable: Support
Event type: Event
Supported HTML tags: <input>
DOM version: Level 3 Events

Browser support

The numbers in the table indicate the first browser version that fully supports the event.

Event Chrome IE Firefox Safari Opera
oninvalid Support 10.0 Support Support Support

More examples

Example 2

If the input field contains fewer than 6 characters, prompt some text:

Name: <input type="text" id="myInput" name="fname" pattern=".{6,}" required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
  alert("Must contain 6 or more characters");
}
</script>

Try It Yourself

Example 3

If the input field contains a number less than 2 or greater than 5, prompt some text:

Number: <input type="number" id="myInput" name="quantity" min="2" max="5" required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
  alert("You must pick a number between 2 and 5. You chose: " + this.value);
}
</script>

Try It Yourself

Related Pages

JavaScript Tutorial: JavaScript Form

DOM Events Event Object