Simple Email Validation in Javascript & CSS

In this article you will learn how to make Simple Email Validation in Javascript. You must have seen many times that the login form of different websites has a kind of validation. This type of validation is mainly for email IDs and passwords.

Here I have given a small demo where there is an input box. You can input the email ID in that input box. If the format of the input email ID is incorrect, there will be some basic changes that will alert the user.

Simple Email Validation in Javascript

To create this Simple Email Validation you need to have an idea about HTML CSS and JavaScript. First I made a small box on the webpage. I used a heading in that box. Then created an input box that I used the input of HTML to create.

Whenever you input something in that input box, if it matches the email id format, then the border of the input box will be green. A green icon can be seen with it. If the email id format is incorrect, the border-color of the input box will turn red and a red icon will appear. With this an error text will appear to warn the user.

Step 1: Basic structure of validation

I have created the basic structure of this Simple Email Validation using the following HTML and CSS. Since this is a demo so has created a small box on the webpage. That box contains all the information and space to input.

I have used the background-color blue of the webpage here and the background color of the box is white. The width of the box is 400px and the height depends on the padding. The box has border-radius to make the four things round and box-shadow to enhance the beauty.

<div class="container">

</div>

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    background: #0584b7;
}
.container{
    width: 400px;
    background-color: #ffffff;
    padding: 50px 30px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    box-shadow: 25px 25px 30px rgba(0,0,0,0.15);
    color: #111111;
}

Step 2: Add headings to the box

Now I have added a heading or title in this box. Font-size: 25px has been used to increase the text size of this title and text-align: center has been used to place it in the middle of the box.

<h1>Email Validation</h1>

h1{
  font-size: 25px;
  text-align: center;
  margin-top: -25px;
  margin-bottom: 25px;
  font-family: sans-serif;
}

Step 3: Create a place to input email

The following HTML and CSS codes have been used to create input space. Here I have used a level and used the input function of HTML to create the input space.

<label for="email-id">Email Id</label><br>
 <input type="email" placeholder="  Email Id or Phone" id="email-id" oninput="checker()"

label,
input,
#error-msg{
    font-family: 'Poppins',sans-serif;
}
label{
    display: inline-block;
    font-weight: 500;
    margin-bottom: 10px;
}
input[type="email"]{
    display: inline-block;
    border: 2px solid #d1d3d4;
    width: 88%;
    height: 50px;
    border-radius: 5px;
    outline: none;
    letter-spacing: 0.5px;
    font-weight: 400;
}

Step 4: Create an icon viewing area

Now I have added an icon in this project (Simple Email Validation in Javascript). This icon is basically not seen in normal condition. This icon appears when you input something.

If your input email ID is in the correct format, the icon will appear in green. If incorrect, the icon will appear in red. Here I did not add icons, add icons and control everything I helped JavaScript. I just created an area to see the icon here.

<div id="icon"> </div>

#icon{
    float: right;
    height: 50px;
    position: relative;
    font-size: 25px;
    padding-top: 10px;
}

Step 5: Add error text for invalid email

As I said before you will see a kind of error text here when you input the email ID incorrectly. I used display: none so that it would not be seen under normal conditions.

<p id="error-msg">Please Enter A Valid Email Id</p>

#error-msg{
    display: none;
    color: #ff2851;
    font-size: 14px;
    margin-top: 10px;
}

Step 6: Activate the JavaScript Email Validation

The basic design of this JavaScript Email Validation has been created. Now is the time to implement it with JavaScript. If you know basic JavaScript you can easily understand the design.

First I set the constant of the input space, the error messageand the icon's ID function one by one.

let emailId = document.getElementById("email-id");
let errorMsg = document.getElementById("error-msg");
let icon = document.getElementById("icon");

Now I have added regular expression character using mailRegex. Regular expression is actually a kind of format. Your input email needs to follow this format. If your email ID follows this format, it will be considered a valid email ID.

let mailRegex = /^[a-zA-Z][a-zA-Z0-9\-\_\.]+@[a-zA-Z0-9]{2,}\.[a-zA-Z0-9]{2,}$/;

Now I have implemented it using JavaScript's 'if' function. Below I have tried to show you in a very simple way.

function checker(){
    icon.style.display="inline-block";
// If your input email ID matches mailRegex then the codes below will be valid. 
// This means that an icon will be found here whose color will be green. 
//The error message cannot be viewed. 
//The border of the input space will be green.
    if(emailId.value.match(mailRegex)){
        icon.innerHTML = '<i class="fas fa-check-circle"></i>';
        icon.style.color = '#2ecc71';
        errorMsg.style.display = 'none';
        emailId.style.border = '2px solid #2ecc71';
    }
// Now I bet what kind of change can happen if you don't input anything instead of input.
// The icon will not be visible if you do not input anything. 
//Error message cannot be seen. 
//The border of the input will remain normal.
    else if(emailId.value == ""){
        icon.style.display = 'none';
        errorMsg.style.display = 'none';
        emailId.style.border = '2px solid #d1d3d4';
    }
//Now I have said what will change if the above two conditions do not work. 
//This means that if you input something and input it incorrectly, the following codes will work. 
//Here I have added the 'exclamation' icon and set the color of the icon to red. 
//The error message can be seen. 
//I have also instructed that the color of the border of the input should be red.
    else{
        icon.innerHTML = '<i class="fas fa-exclamation-circle"></i>';
        icon.style.color = '#ff2851';
        errorMsg.style.display = 'block';
        emailId.style.border = '2px solid #ff2851';
    }

}

Hopefully from this tutorial above you will be able to fully understand how I did this Simple Email Validation in Javascript. You can follow me on Instagram(@foolishdeveloper) to get more updates of such new content. If you are satisfied with this tutorial, please let us know in the comments.

Follow on Instagram for more tutorials 👇👇
https://www.instagram.com/foolishdeveloper/

Blog