Email Validation in HTML CSS & JavaScript
Email Validation is a method that verifies if the user entered email address is valid or not. If an email is not valid then we can show an error message to inform the user about it. You may know, the red color indicates an error and the green color indicates success. So I used these colors to inform the user about their entered email.
You Might Like:
Todo List Website using HTML and CSS:
HTML CSS JS [Source Code]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="../fontawesome-free/css/all.min.css">
<title>Email Checker</title>
</head>
<body>
<div class="wrapper">
<h4>Valid Email Checker</h4>
<div class="form">
<input type="text" spellcheck="false" placeholder="Enter Email">
<button>Submit</button>
<i class="fas fa-copy"></i>
</div>
<div class="error"></div>
<div class="success"></div>
</div>
</body>
</html>
<script>
const Input = document.querySelector('input');
const button = document.querySelector('button');
const errorText = document.querySelector('.error');
const successText = document.querySelector('.success');
const copy = document.querySelector('.fa-copy');
const wrapper = document.querySelector('.wrapper');
button.onclick = function () {
(Input.value == "") ? errorText.innerHTML = "Please Enter Email Address" : checkEmail();
}
copy.onclick = function(){
Input.select();
document.execCommand("copy");
}
function checkEmail() {
let pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
if (!Input.value.match(pattern)) {
errorText.innerHTML = Input.value + " is Not a Valid Email.";
successText.innerHTML = "";
wrapper.classList.add('shake');
} else {
successText.innerHTML = Input.value + " is a Valid Email.";
errorText.innerHTML = "";
}
setTimeout(() => {
wrapper.classList.remove('shake');
}, 400)
}
</script>
/*------------------------- CREATED BY https://facebook.com/groups/codinglearning ------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #675AFE;
}
::selection{
color: #fff;
background: #675AFE;
}
.wrapper{
width: 400px;
max-width: 100%;
margin: 0 8px;
padding: 30px;
border-radius: 7px;
background: #fff;
box-shadow: 7px 7px 20px rgba(0,0,0,0.3);
}
.wrapper.shake{
animation: animate 0.3s ease-in-out;
}
@keyframes animate{
0%, 100%{
transform: rotate(0deg);
}
20%, 80%{
transform: rotate(-10deg);
}
40%, 60%{
transform: rotate(10deg);
}
}
.wrapper h4{
font-size: 28px;
font-weight: 600;
text-align: center;
margin-bottom: 30px;
}
.wrapper .form{
display: flex;
align-items: center;
position: relative;
}
.wrapper .form button{
width: 90px;
border-radius: 0px;
height: 40px;
border: none;
outline: none;
cursor: pointer;
background: #675AFE;
color: #fff;
font-weight: 800;
}
.wrapper input{
width: 100%;
height: 40px;
border: 1px solid #d1d1d1;
outline: none;
padding-left: 15px;
padding-right: 20px;
border-radius: 0px;
color: #333;
}
.wrapper input:focus{
border-color: #675AFE;
}
.wrapper .error{
font-size: 15px;
margin-top: 10px;
color: #ff0000;
}
.wrapper .success{
font-size: 15px;
margin-top: 10px;
color: #00641e;
}
.form i{
position: absolute;
right: 75px;
color: #675AFE;
}