Email Validator Source Code
<!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>
</head>
<body>
<div class="container">
<h1>✉️ Email Validator</h1>
<p class="subtitle">Check if your email format is valid</p>
<div class="input-group">
<label for="email">Enter Email Address</label>
<input type="email" id="email" placeholder="example@email.com">
<div class="feedback" id="feedback"></div>
</div>
<div class="stats">
<div class="stat">Domain: <span id="domain">-</span></div>
<div class="stat">Length: <span id="length">0</span></div>
<div class="stat">Status: <span id="status">Pending</span></div>
</div>
<div class="button-group">
<button onclick="validateEmail()">Validate</button>
<button onclick="resetForm()">Reset</button>
</div>
<div class="result-box" id="result">
<div class="result-title" id="resultTitle">Result</div>
<div class="result-message" id="resultMessage"></div>
</div>
</div>
<script>
const emailInput = document.getElementById('email');
const feedbackDiv = document.getElementById('feedback');
const domainSpan = document.getElementById('domain');
const lengthSpan = document.getElementById('length');
const statusSpan = document.getElementById('status');
const resultBox = document.getElementById('result');
function isValidEmail(email) {
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return regex.test(email);
}
function checkErrors(email) {
const errors = [];
if (!email.includes('@')) {
errors.push('Missing @ symbol');
} else if (email.indexOf('@') !== email.lastIndexOf('@')) {
errors.push('Multiple @ symbols');
}
if (!email.includes('.')) {
errors.push('Missing domain extension');
}
if (email.startsWith('@') || email.startsWith('.')) {
errors.push('Cannot start with @ or .');
}
if (email.endsWith('@') || email.endsWith('.')) {
errors.push('Cannot end with @ or .');
}
if (email.includes(' ')) {
errors.push('Email cannot contain spaces');
}
return errors.length > 0 ? errors : ['Invalid email format'];
}
emailInput.addEventListener('input', function() {
const email = this.value.trim();
if (email === '') {
this.classList.remove('valid', 'invalid');
feedbackDiv.innerHTML = '';
lengthSpan.textContent = '0';
domainSpan.textContent = '-';
statusSpan.textContent = 'Pending';
return;
}
lengthSpan.textContent = email.length;
const isValid = isValidEmail(email);
if (isValid) {
this.classList.add('valid');
this.classList.remove('invalid');
feedbackDiv.textContent = '✓ Valid email format!';
feedbackDiv.className = 'feedback valid';
statusSpan.textContent = 'Valid';
const domain = email.split('@')[1];
domainSpan.textContent = domain || '-';
} else {
this.classList.add('invalid');
this.classList.remove('valid');
feedbackDiv.textContent = '✗ Invalid email format';
feedbackDiv.className = 'feedback invalid';
statusSpan.textContent = 'Invalid';
domainSpan.textContent = '-';
}
});
function validateEmail() {
const email = emailInput.value.trim();
if (email === '') {
alert('Please enter an email address');
return;
}
const isValid = isValidEmail(email);
resultBox.classList.add('show');
if (isValid) {
resultBox.classList.add('valid');
resultBox.classList.remove('invalid');
document.getElementById('resultTitle').textContent = '✓ Valid Email';
document.getElementById('resultMessage').innerHTML =
`<strong>${email}</strong> is a valid email format!`;
} else {
resultBox.classList.add('invalid');
resultBox.classList.remove('valid');
document.getElementById('resultTitle').textContent = '✗ Invalid Email';
const errors = checkErrors(email);
let errorMsg = 'Issues found:<br>';
errors.forEach(error => {
errorMsg += `• ${error}<br>`;
});
document.getElementById('resultMessage').innerHTML = errorMsg;
}
}
function resetForm() {
emailInput.value = '';
emailInput.classList.remove('valid', 'invalid');
feedbackDiv.innerHTML = '';
feedbackDiv.className = 'feedback';
resultBox.classList.remove('show', 'valid', 'invalid');
domainSpan.textContent = '-';
lengthSpan.textContent = '0';
statusSpan.textContent = 'Pending';
}
emailInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
validateEmail();
}
});
</script>
</body>
</html>