The HTML DOM oninvalid event occurs when we submit an invalid element. For example, if an input field is submittable and the required attribute is set then it’s invalid if the field is empty.
Syntax:
- In HTML:
<element oninvalid="myScript">
- In JavaScript:
object.oninvalid = function(){myScript};- In JavaScript, using the addEventListener() method:
object.addEventListener("invalid", myScript);Example 1: Using HTML.
HTML
<!DOCTYPE html><html>
<head>
<title>
HTML DOM oninvalid Event
</title>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>
HTML DOM oninvalid Event
</h2>
<form>
email:
<input type="email" oninvalid=""
name="email" required>
<br>
<input type="submit"
value="Submit">
</form>
</center>
</body>
</html>
|
Output:
Example 2: Using JavaScript.
HTML
<!DOCTYPE html><html>
<head>
<title>
HTML DOM oninvalid Event
</title>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>
HTML DOM oninvalid Event
</h2>
<form>
Email:
<input type="email" id="emailid"
name="email" required>
<br>
<input type="submit" value="Submit">
</form>
<script>
document.getElementById(
"emailid").oninvalid =
function () {
(GFGfun)
};
function GFGfun() {
alert("Please fill out the required fields.");
}
</script>
</center>
</body>
</html>
|
Output:
Example 3: Using addEventListener() method:.
HTML
<!DOCTYPE html><html>
<head>
<title>
HTML DOM oninvalid Event
</title>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>
HTML DOM oninvalid Event
</h2>
<form>
Email:
<input type="email" id="emailid"
name="email" required>
<br>
<input type="submit"
value="Submit">
</form>
<script>
document.getElementById(
"emailid").addEventListener(
"invalid", GFGfun);
function GFGfun() {
alert(
"Please fill out the required fields.");
}
</script>
</center>
</body>
</html>
|
Output:
Supported Browsers: The browsers supported by HTML DOM oninvalid Event are listed below:
- Google Chrome 4
- Edge 13
- Firefox 9
- Apple Safari 5
- Opera 12.1