How to add a JavaScript when an input field is invalid
If you click submit, without filling out the text field, an alert message will occur.
Note: The oninvalid event is not supported in Safari.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php" method="get">
Name: <input type="text" oninvalid="alert('You must fill out the form!');" name="fname" required>
<input type="submit" value="Submit">
</form>
<p>If you click submit, without filling out the text field, an alert message will occur.</p>
<p><strong>Note:</strong> The oninvalid event is not supported in Safari.</p>
</body>
</html>
Output should be:
| Example of HTML oninvalid Event Attribute | Form Events Attribute |
| Definition and Usage of HTML oninvalid Event Attribute | Form Events Attribute |
| Browser Support of HTML oninvalid Event Attribute | Form Events Attribute |
| Syntax of HTML oninvalid Event Attribute | Form Events Attribute |
| Attribute Values of HTML oninvalid Event Attribute | Form Events Attribute |
| Technical Details of HTML oninvalid Event Attribute | Form Events Attribute |
| How to Execute a JavaScript when an input field is invalid | Form Events Attribute |
| How to add a JavaScript when an input field is invalid | Form Events Attribute |
| List of Form Events Attribute | Form Events Attribute |
| What is HTML onblur Event Attribute | Form Events Attribute |
| What is HTML onchange Event Attribute | Form Events Attribute |
| What is HTML oncontextmenu Event Attribute | Form Events Attribute |
| What is HTML onfocus Event Attribute | Form Events Attribute |
| What is HTML oninput Event Attribute | Form Events Attribute |
| What is HTML oninvalid Event Attribute | Form Events Attribute |
Type: | Html |
Category: | Web Tutorial |
Sub Category: | Form Events Attribute |
Uploaded by: | Admin |