Execute a script when the element is invalid in HTML?

HTML Web Development Front End Technology

In this article we are running a script when the element is invalid in HTML.as we are familiar with the <input> tag and <form> element.

HTML <form> element

To gather user input, an HTML form is utilised. Most frequently, a server processes the user input.

<form>
…….
</form>

HTML <input> tag

The <input> tag designates a field for user-enterable data. The most significant form element is the <input> element. Depending on the type attribute, the <input> element can be presented in a number of different ways.

<form>
   <input type= “..” id= “..” >
</form>

When a submittable <input> element is invalid, the “oninvalid” event in HTML is triggered. When a form is submitted, this event may be helpful for listing any form-related issues. Each invalid form control receives an invalid event upon form submission.

Following are the examples for executing a script when the element is invalid in HTML.

Example 1: Using HTML

In the following example we are using the HTML oninvalid event

<!DOCTYPE html>
<html>
<body>
   <form action="#" method="get">
      Name: <input type="text" oninvalid="alert('Fill The Form!');"
      Name="Firstname" required>
      <input type="submit" value="Submit">
   </form>
</body>
</html>

On executing the above script, it will generate an output consisting of an input field along with a submit button.

If the user tries to submit the form without entering the input field, the event gets triggered and displays an alert.

Example 2: Using Javascript

In the following example we are running the script to trigger on invalid event.

<!DOCTYPE html>
<html>
<body>
   <form action="#" method="get">
      UserName: <input type="text" id="tutorial" Name="UserName" required><br>
      Password: <input type="password" name="password">
      <input type="submit" value="Submit">
   </form>
   <script>
      document.getElementById("tutorial").oninvalid = function() {mytutorial()};
      function mytutorial() {
         alert("Fill The Form!");
      }
   </script>
</body>
</html>

When the script gets executed, a window will pop up showing the input type of username and password along with a submit button.

When the user tries to submit the form without filling in the input fields, an event gets triggered and displays an alert.

Using addEventListener() method

The EventTarget interface's addEventListener() method creates a function that will be called each time the specified event is sent to the target. Common targets include Element or its children, Document, and Window, but any object that supports events may be the target.

Example

In the following example we are using the EventListener() method to trigger on invalid event.

<!DOCTYPE html>
<html>
<body>
   <form action="#" method="post">
      <p>
         <label for="firstname">First name: </label>
         <input type="text" id="tutorial" name:"firstname" required><br>
         <label for="lastname">Last name: </label>
         <input type="text" id="lastname"><br>
         <input type="radio" name="sex" value="Male"> Male<br>
         <input type="radio" name="sex" value="Female"> Female<br>
         <input type="submit" value="Send">
      </p>
   </form>
   <script>
      document.getElementById("tutorial").addEventListener("invalid", mytutorial);
      function mytutorial() {
         alert("Fill The Form!");
      }
   </script>
</body>
</html>

When the script gets executed, it will generate the output consisting of an input field for firstname, lastname and radio buttons for male and female, along with a send button.

When the user tries to submit the form without entering the details, the event gets triggered and displays an alert.