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
Selected Reading
How to display HTML5 client-side validation error bubbles?
HTML5 provides built-in client-side validation with error bubbles that appear when users try to submit invalid form data. The required attribute and input types like email automatically trigger these validation messages.
Basic Required Field Validation
The required attribute prevents form submission if the field is empty and displays a validation bubble:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Validation</title>
</head>
<body>
<form id="myForm">
<label for="email">Enter Email:</label>
<input type="email" id="email" name="email" required />
<br><br>
<input type="submit" value="Submit" />
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
console.log('Form submitted successfully!');
});
</script>
</body>
</html>
Different Input Types with Validation
Different input types trigger specific validation patterns and error messages:
<!DOCTYPE html>
<html>
<head>
<title>Multiple Validation Types</title>
</head>
<body>
<form id="validationForm">
<div>
<label for="username">Username (required):</label>
<input type="text" id="username" name="username" required />
</div>
<br>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
</div>
<br>
<div>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}"
title="Please enter 10 digits" required />
</div>
<br>
<div>
<label for="age">Age (18-99):</label>
<input type="number" id="age" name="age" min="18" max="99" required />
</div>
<br>
<input type="submit" value="Submit Form" />
</form>
<script>
document.getElementById('validationForm').addEventListener('submit', function(e) {
alert('All validations passed!');
});
</script>
</body>
</html>
Custom Validation Messages
You can customize validation error messages using JavaScript and the setCustomValidity() method:
<!DOCTYPE html>
<html>
<head>
<title>Custom Validation Messages</title>
</head>
<body>
<form id="customForm">
<label for="password">Password (min 8 characters):</label>
<input type="password" id="password" name="password" required />
<br><br>
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" name="confirmPassword" required />
<br><br>
<input type="submit" value="Register" />
</form>
<script>
const password = document.getElementById('password');
const confirmPassword = document.getElementById('confirmPassword');
password.addEventListener('input', function() {
if (this.value.length < 8) {
this.setCustomValidity('Password must be at least 8 characters long');
} else {
this.setCustomValidity('');
}
});
confirmPassword.addEventListener('input', function() {
if (this.value !== password.value) {
this.setCustomValidity('Passwords do not match');
} else {
this.setCustomValidity('');
}
});
</script>
</body>
</html>
Common Validation Attributes
| Attribute | Purpose | Example |
|---|---|---|
required |
Field must be filled | <input required> |
pattern |
Regex validation | pattern="[0-9]{3}" |
min/max |
Number range | min="1" max="100" |
minlength/maxlength |
Text length | minlength="8" |
Conclusion
HTML5 client-side validation provides automatic error bubbles using attributes like required, input types, and patterns. For advanced scenarios, use JavaScript with setCustomValidity() to create custom validation messages.
Updated on: 2026-03-15T23:18:59+05:30
411 Views
Advertisements