Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML oninvalid Event Attribute
The HTML oninvalid event attribute is triggered when an input field fails validation while submitting a form. This event occurs when form elements with validation constraints (like required, pattern, or type-specific validation) contain invalid data.
Syntax
Following is the syntax for the oninvalid event attribute −
<tagname oninvalid="script"></tagname>
The script parameter contains JavaScript code that executes when the element becomes invalid during form submission.
How It Works
The oninvalid event fires when:
A
requiredfield is empty during form submissionAn input value doesn't match the specified
patternAn email input contains an invalid email format
A number input contains non-numeric values or is outside the specified range
This event allows developers to provide custom feedback when validation fails, enhancing the user experience beyond browser default validation messages.
Example − Required Field Validation
Following example demonstrates the oninvalid event with a required textarea field −
<!DOCTYPE html>
<html>
<head>
<title>HTML oninvalid Event Example</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; background-color: #f5f5f5; }
.form-container { max-width: 500px; margin: 0 auto; background: white; padding: 30px; border-radius: 8px; }
textarea { width: 100%; border: 2px solid #ddd; padding: 10px; font-size: 14px; border-radius: 4px; }
.invalid { border-color: #e74c3c; background-color: #fdf2f2; }
.btn { background: #3498db; color: white; padding: 12px 30px; border: none; border-radius: 4px; cursor: pointer; }
.btn:hover { background: #2980b9; }
</style>
</head>
<body>
<div class="form-container">
<h2>Message Form</h2>
<form>
<textarea id="message" placeholder="Enter your message here" oninvalid="handleInvalid()" rows="6" required></textarea>
<br><br>
<button type="submit" class="btn">Submit Message</button>
</form>
<p><em>Try submitting without entering any text to see the oninvalid event in action.</em></p>
</div>
<script>
function handleInvalid() {
const textarea = document.getElementById('message');
textarea.classList.add('invalid');
textarea.placeholder = 'This field is required! Please enter your message.';
}
// Remove invalid styling when user starts typing
document.getElementById('message').addEventListener('input', function() {
this.classList.remove('invalid');
this.placeholder = 'Enter your message here';
});
</script>
</body>
</html>
When you click submit without entering text, the textarea border turns red and the placeholder text changes to indicate the validation error.
Example − Email Validation
Following example shows oninvalid event with email input validation −
<!DOCTYPE html>
<html>
<head>
<title>Email Validation with oninvalid</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.form-group { margin-bottom: 20px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input { width: 300px; padding: 10px; border: 2px solid #ddd; border-radius: 4px; }
.error { border-color: #e74c3c; }
.error-message { color: #e74c3c; font-size: 14px; margin-top: 5px; display: none; }
.submit-btn { background: #27ae60; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; }
</style>
</head>
<body>
<h2>User Registration</h2>
<form>
<div class="form-group">
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" oninvalid="showEmailError()" required>
<div id="emailError" class="error-message">Please enter a valid email address.</div>
</div>
<button type="submit" class="submit-btn">Register</button>
</form>
<p><em>Try entering invalid email formats like "test" or "user@" to trigger validation.</em></p>
<script>
function showEmailError() {
const emailInput = document.getElementById('email');
const errorDiv = document.getElementById('emailError');
emailInput.classList.add('error');
errorDiv.style.display = 'block';
}
// Hide error when user corrects the input
document.getElementById('email').addEventListener('input', function() {
this.classList.remove('error');
document.getElementById('emailError').style.display = 'none';
});
</script>
</body>
</html>
Enter an invalid email format (like "test" or "user@") and click Register to see the custom error styling and message.
Example − Multiple Input Validation
Following example demonstrates oninvalid with different input types −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Input Validation</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; max-width: 600px; margin: 0 auto; }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input { width: 100%; padding: 8px; border: 2px solid #ddd; border-radius: 4px; }
.invalid-field { border-color: #e74c3c; background-color: #fdf2f2; }
.submit-btn { background: #3498db; color: white; padding: 12px 24px; border: none; border-radius: 4px; cursor: pointer; }
.validation-info { background: #ecf0f1; padding: 10px; border-radius: 4px; margin-top: 10px; }
</style>
</head>
<body>
<h2>Registration Form</h2>
<form>
<div class="form-group">
<label for="username">Username (minimum 3 characters):</label>
<input type="text" id="username" pattern=".{3,}" oninvalid="markInvalid(this, 'Username must be at least 3 characters')" required>
</div>
<div class="form-group">
<label for="age">Age (18-65):</label>
<input type="number" id="age" min="18" max="65" oninvalid="markInvalid(this, 'Age must be between 18 and 65')" required>
</div>
<div class="form-group">
<label for="phone">Phone (10 digits):</label>
<input type="tel" id="phone" pattern="[0-9]{10}" oninvalid="markInvalid(this, 'Phone number must be exactly 10 digits')" required>
</div>
<button type="submit" class="submit-btn">Submit Registration</button>
</form>
<div id="validationMessage" class="validation-info" style="display: none;"></div>
<script>
function markInvalid(element, message) {
element.classList.add('invalid-field');
document.getElementById('validationMessage').textContent = message;
document.getElementById('validationMessage').style.display = 'block';
}
// Remove invalid styling when user starts correcting
document.querySelectorAll('input').forEach(input => {
input.addEventListener('input', function() {
this.classList.remove('invalid-field');
document.getElementById('validationMessage').style.display = 'none';
});
});
</script>
</body>
</html>
Try submitting with invalid data (username less than 3 characters, age outside 18-65 range, or phone number not exactly 10 digits) to see different validation messages.
Common Use Cases
The oninvalid event is particularly useful for:
Custom error styling − Apply visual feedback beyond browser defaults
User-friendly messages − Replace technical validation messages with clear instructions
Accessibility improvements − Announce errors to screen readers
Analytics tracking − Log validation errors for form optimization
Browser Compatibility
The oninvalid event attribute is supported by all modern browsers including Chrome, Firefox, Safari, and Edge. It works with HTML5 form validation on input, select, and textarea elements that have validation constraints.
Conclusion
The oninvalid event attribute provides a powerful way to customize form validation feedback in HTML5. It triggers when form elements fail validation during submission, allowing developers to create better user experiences with custom styling and helpful error messages. Use it alongside HTML5 validation attributes like required, pattern, and input types for comprehensive form validation.
326 Views
