Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM oninvalid Event

  • Last Updated : 28 Jun, 2019

The HTML DOM oninvalid event occurs when we submit an invalid element. For example, 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.




<!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.






<!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:.




<!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:
Before:

After:

Supported Browsers: The browsers supported by HTML DOM oninvalid Event are listed below:

  • Google Chrome
  • Internet Explorer 10.0
  • Firefox
  • Apple Safari
  • Opera

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :