The HTML oninvalid attribute is an event handler that triggers a script to execute when an element within a form becomes invalid during form submission.
Definition and Usage
➔ This usually happens when a required field is empty, or when the input does not meet the validation constraints.
➔ When a user attempts to submit a form input element with validation constraints, the browser first checks the validity.
➔ If an input element fails its validity test, the invalid event is triggered for that specific element.
➔ Typically used to provide live custom feedback to the user, such as:
- validating user input,
- displaying a custom error message,
- highlighting invalid input fields,
- setting a placeholder text in the input field,
- and guiding the user in real-time.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML oninvalid Attribute Example</title>
<meta charset="utf-8" />
<style>
input[type="submit"] {
width: 150px;
height: 50px;
background-color: #2e3e4e;
font-size: 14pt;
color: white;
border-radius: 5px;
margin-left: 140px;
}
input[type="submit"]:hover {
background-color: #1d2d3d;
color: white;
}
input[type="text"]{
width: 230px;
height: 30px;
background-color: #efffff;
font-size: 14pt;
color: #000;
border-radius: 5px;
margin: 5px;
}
input[type="text"]:hover{
background-color: #fff;
}
</style>
</head>
<body>
<h2>HTML oninvalid Attribute Example</h2>
<p>Submit the button with empty textfield to trigger oninvalid event.</p>
<form>
Name: <input type="text" required oninvalid="myFunction()"><br>
<input type="submit" value="Submit" id="button">
</form>
<script>
function myFunction() {
alert("Name filed can not be empty.");
}
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.
Html inline JavaScript.
Example
<!-- html inline javascript example -->
<!DOCTYPE html>
<html>
<head>
<title>HTML oninvalid Attribute Example</title>
<meta charset="utf-8" />
<style>
input[type="submit"] {
width: 150px;
height: 50px;
background-color: #2e3e4e;
font-size: 14pt;
color: white;
border-radius: 5px;
margin-left: 140px;
}
input[type="submit"]:hover {
background-color: #1d2d3d;
color: white;
}
input[type="text"],
input[type="email"] {
width: 230px;
height: 30px;
background-color: #efffff;
font-size: 14pt;
color: #000;
border-radius: 5px;
margin: 5px;
}
input[type="text"]:hover,
input[type="email"]:hover {
background-color: #fff;
}
</style>
</head>
<body>
<h2>HTML oninvalid Attribute Example</h2>
<p>This is for example purposes only, this example will not allow you to submit values.</p>
<form>
Code: <input type="text" name="id" id="id" required pattern="[a-z]{3,6}"
oninvalid="myFunction('#idspan','Code must be lowercase and 3-6 characters in length.')"><span
id="idspan"></span><br>
Name: <input type="text" name="name" id="name" required pattern="[A-Za-z]{4,8}"
oninvalid="myFunction('#namespan','Name must be lowercase and uppercase with 4-8 characters in length.')"><span
id="namespan"></span><br>
Email: <input type="email" name="email" id="email" required
oninvalid="javascript:{myFunction('#emailspan','Email Required');}"><span id="emailspan"></span><br>
<input type="submit" value="Submit" id="button">
</form>
<script>
function myFunction(p, msg) {
document.querySelector(p).innerHTML = msg;
}
</script>
</body>
</html>
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| oninvalid | All visible elements |