HTML oninvalid Event Attribute - HTML Form Events Attribute

The HTML oninvalid event attribute specifies a script to be executed when a submittable <input> element is found to be invalid during form validation. This event is typically triggered when a user attempts to submit a form containing an input field that does not meet its defined constraints, such as a required field being empty or a field not matching a specified pattern.

Example of HTML oninvalid Event Attribute

It will Execute a JavaScript when an input field is invalid.

index.html

Example: HTML

 <input type="text" oninvalid="alert('You must fill out the form!');" required>

Output should be:

Definition and Usage of HTML oninvalid Event Attribute

The oninvalid event occurs when a submittable <input> element is invalid.

For example, the input field is invalid if the required attribute is set and the field is empty (the required attribute specifies that the input field must be filled out before submitting the form).

Browser Support of HTML oninvalid Event Attribute

The numbers in the table specify the first browser version that fully supports the event attribute

Syntax of HTML oninvalid Event Attribute

<element oninvalid="script">

Attribute Values of HTML oninvalid Event Attribute

Value	Description
script	The script to be run on oninvalid

Technical Details of HTML oninvalid Event Attribute

Supported HTML tags:	<input>

How to Execute a JavaScript when an input field is invalid

If you submit the input field with less than 6 characters, 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('Must contain 6 or more characters');" name="fname" pattern=".{6,}">
  <input type="submit" value="Submit">
</form>

<p>If you submit the input field with less than 6 characters, an alert message will occur.</p>

<p><strong>Note:</strong> The oninvalid event is not supported in Safari.</p>

</body>
</html>

Output should be:

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:

html event attributes

Type:	Develop
Category:	Web Tutorial
Sub Category:	HTML Form Events Attribute
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference