HTML DOM oninvalid Event

Last Updated : 21 Jun, 2023

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>