Advertisement
Today you will learn to create an Email Validate program using pure JS. This program will help you to create a perfect email field to avoid invalid email inputs. There are some conditions like, you have put some characters before @, and @ is required, after that you need two or three char before .com, etc...
So, Today I am sharing JavaScript Email Validation With CSS UI. There is a rectangle type box with headings, and email fields, and a button for validating. And also there are another two massages for valid and invalid email info. But there is only one field for put email, if you want full form then you can check out above in the first line of the paragraph...
JavaScript Email Validation With CSS UI Source Code
Before sharing source code, let’s talk about it. First I have created an HTML form with two inputs, one text input and one is button input. After that, create two divs for massages, one for valid massage and other for invalid massage. And for font, used a google font and linked in HTML file..
Using CSS, I have placed all elements in the right place. Also gave a red theme for invalid email massage and green theme for valid massage. As you know the full program is based on JavaScript, actually JS has done the main work. First JavaScript checks the email according to condition, then fetched the massage divs.
After checking the Email, there is an If & Else condition (info). If the email is valid then JS show the valid message and hide the invalid massage’s div. Then do the same thing when the email is invalid. I can’t explain more in writing, you will understand easily after getting the codes. For creating this program you have to create 3 files, first for HTML, second for CSS, and third for JS. Follow the steps to creating this without any error...
<!DOCTYPE html>
<!--Code By watu-x-team ( https://watu-x-team.blogspot.com/ )-->
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>JS Email Validation | https://watu-x-team.blogspot.com/</title>
<link href="https://fonts.googleapis.com/css?family=Lexend+Deca&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="validate">
<h1>Validation</h1>
<p>Email Validation Using JavaScript!</p>
<form id="form" action="" method="get" name="validate">
<input type="text" placeholder="Email" name="courriel"/>
<input type="submit" value="Validate" id="btn" />
</form>
<div id="novalid">
<p>Sorry, you have to provide a valid email.</p>
</div>
<div id="valid">
<p>Thank you, This is a valid Email address.</p>
</div>
</div>
<script src="function.js"></script>
</body>
</html>
/** Code By watu-x-team ( https://watu-x-team.blogspot.com/ ) **/
body{margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f3f3f3;
color: white;
font-family: 'Lexend Deca', sans-serif;
}
.validate{max-width: 60%;
background-color: #2ab1ce;
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
padding: 4em;
border: 2px solid #212121;
border-radius: 1em;
}
h1 {margin: 0;
color: white;
font-size: 4em;
}
p {font-size: 2em;
margin: 0;
}
form {margin: 3em 0 0 0;
}
input {padding: 0.5em;
border: 1px solid white;
background-color: #ff5c5c;
color: white;
font-family: 'Josefin Slab', serif;
font-size: 1.3em;
border-radius: 10px;
}
#btn:hover {background-color: #212121;
color: #daede2;
cursor: pointer;
}
::-webkit-input-placeholder { color: white;
}
:-moz-placeholder {color: white;
opacity: 1;
}
::-moz-placeholder { color: white;
opacity: 1;
}
:-ms-input-placeholder { color: white;
}
::-ms-input-placeholder {color: white;
}
#novalid{background-color: red;
padding: 1em;
margin: 1em 0 0 0;
font-size: 0.5em;
display: none;
}
#valid{background-color: green;
padding: 1em;
margin: 1em 0 0 0;
font-size: 0.5em;
display: none;
}
@media (max-width: 765px) { * {width: 100%;
text-align: center;
align-content: center;
}
.validate {max-width: 90%;
padding: 1.5rem;
}
#btn {margin-top: 10px;
}
}
/** Code By watu-x-team ( https://watu-x-team.blogspot.com/ ) **/
document.getElementById("form").addEventListener("submit", validation);function validation(){event.preventDefault();
let email = document.forms["validate"]["courriel"].value;
let at = email.indexOf("@"); let point = email.lastIndexOf("."); let non = document.getElementById("novalid"); let oui = document.getElementById("valid"); if(at < 1 || point < (at + 2) || (point + 2) >= email.length){non.style.display = "block";
oui.style.display = "none";
return false;
} else {oui.style.display = "block";
non.style.display = "none";
return false;
}
}
