How to Validate Email in HTML CSS & JavaScript | Email Checker
Hello friend, I hope you're doing well and creating awesome projects! Today, I’m going to show you how to build a simple yet effective Email Validation tool using HTML, CSS, and JavaScript.
Validating an email address is a common requirement in web development, especially in forms such as login, registration, or subscription. In this tutorial, we’ll build an email checker that provides real-time feedback to users as they type their email address.
Project Preview
In this project, we’ll have a neat input field for email. As you type:
- An empty field shows a grey icon.
- An invalid email turns the icon red.
- A valid email turns the icon green with a check mark.
Objective
We want to validate emails using JavaScript (via regex), change icons based on validity, and style everything using CSS. Let's dive in.
Technologies Used
- HTML for structure
- CSS for styling
- JavaScript for real-time validation
- Unicons for email/check icons
HTML Code
This HTML defines the input field and imports Unicons for icons:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Email Validator</title>
<link href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" rel="stylesheet">
<style>
/* CSS goes here (see next section) */
</style>
</head>
<body>
<div class="input-field">
<input type="email" placeholder="Enter your email" spellcheck="false" />
<i class="uil uil-envelope email-icon"></i>
</div>
<script>
// JavaScript goes here (see below)
</script>
</body>
</html>
CSS Code
This CSS adds styling to center the input field, style the icons, and make everything responsive and clean.
/* Google Font */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #e3f2fd;
}
.input-field {
position: relative;
height: 50px;
width: 280px;
border-radius: 6px;
background-color: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.input-field input {
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 6px;
padding: 0 15px;
font-size: 15px;
font-weight: 400;
color: #333;
}
.input-field input::placeholder {
color: #b4b4b4;
}
.email-icon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
font-size: 22px;
color: #b4b4b4;
}
JavaScript Code
This JavaScript listens for input events and validates the email using a regular expression. It updates the icon and its color based on whether the input is valid, invalid, or empty.
const input = document.querySelector("input");
const emailIcon = document.querySelector(".email-icon");
input.addEventListener("keyup", () => {
let pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
if (input.value === "") {
emailIcon.classList.replace("uil-check-circle", "uil-envelope");
emailIcon.style.color = "#b4b4b4";
return;
}
if (input.value.match(pattern)) {
emailIcon.classList.replace("uil-envelope", "uil-check-circle");
emailIcon.style.color = "#4bb543"; // green
} else {
emailIcon.classList.replace("uil-check-circle", "uil-envelope");
emailIcon.style.color = "#de0611"; // red
}
});
Demo
Please click the button below to view the demo.
Final Notes
This Email Checker is a great beginner-friendly project that teaches:
- How to handle input events in JavaScript
- How to use regex for pattern matching
- How to create interactive UI with real-time feedback
If your validation isn’t working, double-check:
- The regex pattern is correct
- Unicons CSS is properly linked
- No typos in class names
That’s it! You’ve now built a fully functional and stylish email validator using just HTML, CSS, and JavaScript. Happy coding!
