Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Execute a script when the element is invalid in HTML?
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.
205 Views
