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 DOM Input Email pattern Property
The HTML DOM Input Email pattern property is used to set or return the value of the pattern attribute of an email input field. This property defines a regular expression that the email input value is checked against during form validation.
Syntax
Following is the syntax for getting the pattern value −
inputEmailObject.pattern
Following is the syntax for setting the pattern value −
inputEmailObject.pattern = "RegExp"
Parameters
The pattern property accepts the following parameter −
RegExp − A string containing a regular expression that defines the valid format for the email input.
Return Value
The pattern property returns a string representing the regular expression pattern, or an empty string if no pattern is set.
Example − Getting and Setting Email Pattern
Following example demonstrates how to get and set the pattern property of an email input field −
<!DOCTYPE html>
<html>
<head>
<title>Input Email Pattern Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Email Pattern Property Demo</h2>
<label for="email">Employee Email:</label>
<input type="email" id="email" pattern="[a-zA-Z0-9]+@company\.com"
title="Format: username@company.com">
<br><br>
<button onclick="getPattern()">Get Pattern</button>
<button onclick="setNewPattern()">Set New Pattern</button>
<button onclick="clearPattern()">Clear Pattern</button>
<p id="result"></p>
<script>
const emailInput = document.getElementById("email");
const result = document.getElementById("result");
function getPattern() {
result.textContent = "Current pattern: " + (emailInput.pattern || "No pattern set");
}
function setNewPattern() {
emailInput.pattern = "[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}";
result.textContent = "New pattern set: " + emailInput.pattern;
}
function clearPattern() {
emailInput.pattern = "";
result.textContent = "Pattern cleared";
}
// Display initial pattern
getPattern();
</script>
</body>
</html>
The output shows how you can dynamically get, set, and clear the pattern property −
Email Pattern Property Demo Employee Email: [input field] [Get Pattern] [Set New Pattern] [Clear Pattern] Current pattern: [a-zA-Z0-9]+@company\.com
Example − Email Validation with Custom Patterns
Following example shows form validation using different email patterns −
<!DOCTYPE html>
<html>
<head>
<title>Email Pattern Validation</title>
<style>
form { width: 400px; margin: 20px auto; padding: 20px; border: 1px solid #ccc; }
input[type="email"] { width: 100%; padding: 8px; margin: 5px 0; }
input[type="submit"] { background: #007bff; color: white; padding: 10px 20px; border: none; }
.error { color: red; font-size: 12px; }
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<form onsubmit="return validateEmail(event)">
<fieldset>
<legend>Employee Registration</legend>
<label for="companyEmail">Company Email (must end with @company.com):</label>
<input type="email" id="companyEmail"
pattern="[a-zA-Z0-9._-]+@company\.com"
title="Email must end with @company.com" required>
<br><br>
<label for="personalEmail">Personal Email (standard format):</label>
<input type="email" id="personalEmail"
pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"
title="Enter a valid email address" required>
<br><br>
<input type="submit" value="Register">
<div id="message"></div>
</fieldset>
</form>
<script>
function validateEmail(event) {
event.preventDefault();
const companyEmail = document.getElementById("companyEmail");
const personalEmail = document.getElementById("personalEmail");
const message = document.getElementById("message");
message.innerHTML = "<h3>Pattern Information:</h3>" +
"<p>Company Email Pattern: " + companyEmail.pattern + "</p>" +
"<p>Personal Email Pattern: " + personalEmail.pattern + "</p>";
if (companyEmail.checkValidity() && personalEmail.checkValidity()) {
message.innerHTML += "<p style='color: green;'>? Both emails are valid!</p>";
} else {
message.innerHTML += "<p style='color: red;'>? Please check email formats</p>";
}
return false; // Prevent actual form submission for demo
}
</script>
</body>
</html>
This example validates two different email formats using custom patterns −
Employee Registration
Company Email (must end with @company.com): [input field]
Personal Email (standard format): [input field]
[Register]
Pattern Information:
Company Email Pattern: [a-zA-Z0-9._-]+@company\.com
Personal Email Pattern: [a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}
Example − Dynamic Pattern Updates
Following example demonstrates changing email patterns dynamically based on user selection −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Email Pattern</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Email Pattern Example</h2>
<label for="domain">Select Email Domain:</label>
<select id="domain" onchange="updatePattern()">
<option value="company">Company (@company.com)</option>
<option value="gmail">Gmail (@gmail.com)</option>
<option value="yahoo">Yahoo (@yahoo.com)</option>
<option value="any">Any Domain</option>
</select>
<br><br>
<label for="userEmail">Enter Email:</label>
<input type="email" id="userEmail" required>
<br><br>
<button onclick="checkEmail()">Validate Email</button>
<div id="info"></div>
<script>
const emailInput = document.getElementById("userEmail");
const domainSelect = document.getElementById("domain");
const info = document.getElementById("info");
const patterns = {
company: "[a-zA-Z0-9._-]+@company\.com",
gmail: "[a-zA-Z0-9._-]+@gmail\.com",
yahoo: "[a-zA-Z0-9._-]+@yahoo\.com",
any: "[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"
};
function updatePattern() {
const selectedDomain = domainSelect.value;
emailInput.pattern = patterns[selectedDomain];
info.innerHTML = "<p><strong>Current Pattern:</strong> " + emailInput.pattern + "</p>";
}
function checkEmail() {
if (emailInput.checkValidity()) {
info.innerHTML += "<p style='color: green;'>? Email is valid for selected domain!</p>";
} else {
info.innerHTML += "<p style='color: red;'>? Email doesn't match the required pattern</p>";
}
}
// Initialize with default pattern
updatePattern();
</script>
</body>
</html>
The pattern changes dynamically based on the selected domain, allowing different validation rules −
Dynamic Email Pattern Example Select Email Domain: [Company (@company.com) ?] Enter Email: [input field] [Validate Email] Current Pattern: [a-zA-Z0-9._-]+@company\.com
Common Email Patterns
Following are some commonly used email validation patterns −
| Pattern Type | Regular Expression | Description |
|---|---|---|
| Basic Email | [a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,} |
Accepts most standard email formats |
| Company Domain | [a-zA-Z0-9._-]+@company\.com |
Restricts to specific company domain |
| Educational | [a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.edu |
Restricts to educational institutions |
| Alphanumeric Only | [a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z]{2,} |
No special characters except @ and . |
Key Points
The pattern property works with HTML5 form validation to check email format before submission.
When a pattern is set, the browser shows a validation message if the input doesn't match.
The pattern is a regular expression string, so special characters need proper escaping.
Use the
titleattribute to provide helpful hints about the expected format.The pattern property can be changed dynamically using JavaScript for flexible validation.
Conclusion
The HTML DOM Input Email pattern property provides a powerful way to validate email formats using regular expressions. It enables both client-side validation and dynamic pattern updates, making it essential for creating robust email input forms with custom validation requirements.
380 Views
