Email Validator Check
Want to build a better user experience for your forms? This simple yet effective email validation form uses HTML, CSS, and JavaScript to deliver real-time feedback as users type. With intuitive ✅ and ❌ icons, accessible error messaging, and a clean, responsive design, it helps users quickly identify and fix mistakes. Whether you’re just starting out or refining your frontend skills, this example is easy to follow, adapt, and integrate into your own projects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dev Code Journey</title>
<style>
body {
font-family: Arial, sans-serif;
margin: auto;
}
input[type="text"] {
padding: 8px;
width: 300px;
font-size: 16px;
}
input[type="submit"] {
padding: 8px 16px;
font-size: 16px;
margin-top: 10px;
cursor: pointer;
}
.message {
margin-top: 10px;
font-weight: bold;
}
.error {
color: red;
}
.success {
color: green;
}
.feedback {
display: inline-block;
margin-left: 10px;
font-size: 18px;
}
</style>
</head>
<body>
<h2>Email Validator Check</h2>
<form onsubmit="return validateEmail()">
<label for="email">Enter your email:</label><br><br>
<input type="text" id="email" name="email" required oninput="liveValidateEmail()">
<span id="email_icon" class="feedback" aria-live="polite"></span>
<br><br>
<input type="submit" value="Submit">
</form>
<p id="alert_text" class="message error" role="alert"></p>
<p id="success_text" class="message success" role="status"></p>
<script>
function isValidEmail(email) {
var pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
return pattern.test(email);
}
function liveValidateEmail() {
var email = document.getElementById("email").value;
var icon = document.getElementById("email_icon");
var alertText = document.getElementById("alert_text");
var successText = document.getElementById("success_text");
alertText.innerText = "";
successText.innerText = "";
if (email === "") {
icon.innerHTML = "";
return;
}
if (isValidEmail(email)) {
icon.innerHTML = "✅";
} else {
icon.innerHTML = "❌";
}
}
function validateEmail() {
var email = document.getElementById("email").value;
var alertText = document.getElementById("alert_text");
var successText = document.getElementById("success_text");
if (isValidEmail(email)) {
alertText.innerText = "";
successText.innerText = "✅ Email is valid!";
return true;
} else {
successText.innerText = "";
alertText.innerText = "❌ Invalid email format!";
return false;
}
}
</script>
</body>
</html>
