oninvalid-gebeurtenis

DOM events Event object

Definitie en gebruik

Bij een ongeldige in te dienen <input>-element vindt het oninvalid-gebeurtenis plaats.

Bijvoorbeeld, als de required-eigenschap is ingesteld en het veld leeg is, is het invoerveld ongeldig (de required-eigenschap specificeert dat het invoerveld moet worden ingevuld voordat het formulier wordt ingediend).

Example

Example 1

If the input field is invalid, display 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 this 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, display 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, display 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