Make Email Validation Using JavaScript Code

Email Validation is basically to get the authentication that it belongs to perfectly belongs to you. It has became necessary in each and every social media platform to verify for email so that if your account is stolen, hacked or it has been login from various device you’ll get the email.

Email authentication allows ISPs (Internet service providers) to properly identify the sender of an email, and it helps to ensure high delivery rates.

Authentication focuses on reducing spam, which makes up 67% of all email traffic (according to Forrester Research). It means that when receiving 10 emails, only 3 of them are worth the user’s time to read.

Create Simple Portfolio Website Using Html Css (Portfolio Source Code)

So Hey Welcome back to codewithrandom with a new blog in todays blog we’ll see how to create a email validation project using HTML5, CSS3 & JS.

I hope you must have got an idea about the project.

Let’s have a look at our project E-mail Validation.👇

HTML Code in Email Validation

<div>
    <h3>email validation check</h3>
  </div>
  <form action="#" id="form">
    <div class="inputBox ">
      <input type="text" name="" id="email" 
             placeholder="Enter email address" onkeydown="validation()">
      <span id="text"></span>
    </div>
   </form>

This is basically a small HTML code in which we have created a textbox which will take the e-mail ID from the user and a placeholder which basically acts as a watermark in the textbox. and create Java function as onkeydown Now lets code the styling part.

CSS Code in Email Validation

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #373737;
  }
  
  h3{
    position: relative;
    font-size: 20px;
    color: #f9f9f9;
    letter-spacing: 1px;
    font-weight: 500;
    margin-bottom: 5px;
  }
  
  #form{
    position: relative;
    
  }
  #form #email {
    width: 300px;
    background: #292929;
    border: none;
    outline: none;
    padding: 10px;
    border-radius: 6px;
    color: #fff;
    font-style: 18px;
  }
  .inputBox{
    position: relative;
  }

  #text{
      display: block;
      color: #000;
      font-weight: 500;
      font-style: italic;
      padding: 5px;
  }

  #form.invalid .inputBox::before{
      content: "";
      position: absolute;
      right: 12px;
      top: 6px;
      width: 24px;
      height: 24px;
      background-color: #ff0000;
      z-index: 1000;
  }
  #form.valid .inputBox::before{
      content: "";
      position: absolute;
      right: 12px;
      top: 6px;
      width: 24px;
      height: 24px;
      background-color: #00ff00;
      z-index: 1000;
  }

Although creating the structure was easy but the designing part is not that complicated we have just set the position of each and every tag defined in the HTML file and given the BG color. Now to make responsive we have to write script in the Java Language.

JavaScript Code in Email Validation

  function validation(){
  var form = document.getElementById('form');
   var email = document.getElementById('email').value;
   var text = document.getElementById('text');
  
  var pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
  
  if(email.match(pattern)) {
    form.classList.add('valid');
    form.classList.remove('invalid');
    text.innerHTML = "Your email Address is vaild";
    text.style.color = "#00ff00";
  } else{
     form.classList.remove('valid');
     form.classList.add('invalid');
     text.innerHTML = "please enter valid email";
    text.style.color = "#ff0000";
  }

  if(email == "") {
    form.classList.remove('valid');
    form.classList.remove('invalid');
    text.innerHTML = "";
    text.style.color = "#00ff00";
}
};

In JavaScript we have set the condition for entering the email to do that we have defined if-else statement and we have also defined which special character can be entered in the textbox.

Final Output of Email Validation

We have Successfully created our Email Validation using HTML5, CSS3 & JS (Source Code) | Email Validation JavaScript You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned below.

100+ Front-end Projects for Web developers (Source Code)

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

WRITTEN BY – Harsh Sawant

Code By – Salha Issa