Real time email validation in JavaScript allows you to validate an email address as the user types into the input field, enhancing the user experience by providing immediate feedback.
By giving consumers instant feedback on the legitimacy of email addresses as they write, JavaScript’s real-time email validation improves the user experience. Errors may be avoided, and data integrity can be enhanced. Here are some doable strategies for putting real-time email validation into practice.
You can use a simple regex pattern to validate email addresses in real time. Here’s how you can implement it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-Time Email Validation</title>
<style>
.valid {
border: 2px solid green;
}
.invalid {
border: 2px solid red;
}
.message {
font-size: 14px;
color: red;
display: none;
}
.message.active {
display: block;
}
</style>
</head>
<body>
<form id="emailForm">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email">
<p id="emailMessage" class="message">Invalid email format</p>
<br><br>
<button type="submit">Submit</button>
</form>
<script>
// Get elements
const emailInput = document.getElementById('email');
const emailMessage = document.getElementById('emailMessage');
// Email validation regex
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
// Add input event listener for real-time validation
emailInput.addEventListener('input', function () {
const emailValue = emailInput.value;
if (emailPattern.test(emailValue)) {
emailInput.classList.add('valid');
emailInput.classList.remove('invalid');
emailMessage.classList.remove('active');
} else {
emailInput.classList.add('invalid');
emailInput.classList.remove('valid');
emailMessage.classList.add('active');
}
});
// Prevent form submission if the email is invalid
document.getElementById('emailForm').addEventListener('submit', function (event) {
if (!emailPattern.test(emailInput.value)) {
event.preventDefault();
alert('Please enter a valid email address before submitting.');
}
});
</script>
</body>
</html>
<input> element listens for user input./^[^\s@]+@[^\s@]+\.[^\s@]+$/) is used to validate the email format.input event checks the current value against the regex.valid or invalid CSS class to the input field.
<form id="emailForm">
<label for="email">Email:</label>
<input type="text" id="email" oninput="validateEmail(this.value)" />
<div id="error-message" style="color:red;"></div>
</form>
<script>
function validateEmail(email) {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const errorMessage = document.getElementById('error-message');
if (emailPattern.test(email)) {
errorMessage.textContent = ''; // Clear error message
} else {
errorMessage.textContent = 'Invalid email format'; // Show error message
}
}
</script>In this example:
oninput event triggers the validateEmail function every time the user types in the input field.
Written By
Learn JavaScript Email Validation - Beginner's Guide Are you a web developer looking to improve your skills? Email validation is key in web development. It keeps your app secure and reliable. This guide will teach you about JavaScript email validation, helping you make your app better. You'll learn the basics of email validation and why it's important. We'll cover different ways to validate ...