Home Web Development JavaScript JavaScript Email Validation With CSS UI | Email Validate JS

JavaScript Email Validation With CSS UI | Email Validate JS

August 25, 2019

9931

How we can check a valid Email provide by users using JavaScript? Solution: JavaScript Email Validation With CSS UI, Email Validate JS Program.

Previously I have shared a form validation using JavaScript or Query, But this is only for validating email. I also have shared a Pure HTML CSS Form Validation without JS, you can check it also. Basically, Email Validation is a procedure that verifies if an email address is deliverable and valid.

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.

If you are thinking now how this email validation actually is, then see the preview given below.

Preview Of Email Validate JS

See this video to getting an idea of how this program looks like.

https://webdevtrick.com/wp-content/uploads/email-validator-js.mp4?_=1

Live Demo

Now you can see this visually, you also can see it live by pressing the button given above. If you like this program, then get the source code of its.

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.

index.html

Create an HTML file ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>JS Email Validation | Webdevtrick.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>

<!DOCTYPE html>

<head>

<title>JS Email Validation | Webdevtrick.com</title>

</head>

<body>

<h1>Validation</h1>

<p>Email Validation Using JavaScript!</p>

</form>

<p>Sorry, you have to provide a valid email.</p>

</div>

<p>Thank you, This is a valid Email address.</p>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/** Code By Webdevtrick ( https://webdevtrick.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 Webdevtrick ( https://webdevtrick.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;

}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

/** Code By Webdevtrick ( https://webdevtrick.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;
		}
}

/** Code By Webdevtrick ( https://webdevtrick.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;

}

That’s It. Now you have successfully created JavaScript Email Validation With CSS UI, Email Validate JS Program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.