Email Validation Check in HTML CSS & JavaScript

6

Email Validation Check in HTML CSS & JavaScript

Hello readers, Today in this blog you’ll learn how to Check Email Validation in HTML CSS & JavaScript. Earlier I have shared many Login Form Designs but there are no features of the Email Validation Check.  Email Validation is a procedure that verifies if an email address is deliverable and valid. So now it’s time to create a Fully Validated Email Field in JavaScript.

Today in this blog, I’ll share with you this program (Email Validation Check). At first, on the webpage, there are two containers. On the first container, I have entered an invalid email address so there is shown a tooltip with a warning message and with the red border. And, in the second container, I have entered a valid email address so there is shown the submit button and with the green border. As you know, the red color indicates an error and the green color indicates success.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Email Validation Check in HTML CSS & JavaScript).

Video Tutorial of Email Validation Check using JavaScript

 
If you like this program (Email Validation Check) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. If you’re a beginner and you have some knowledge of HTML CSS & JavaScript then you can also create a program like this that checks email validation, password validation, username validation, etc. You can also use this program in your projects and websites.


Email Validation Check using JavaScript [Source Codes]

To create this program (Email Validation Check). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Email Validation Check | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
      <div class="content">
         <header>Email Validation Check in HTML CSS & JavaScript</header>
         <form action="#">
            <div class="field">
               <input onkeyup="check()" id="email" type="text" autocomplete="off" placeholder="Enter Email Address">
               <div class="icons">
                  <span class="icon1 fas fa-exclamation"></span>
                  <span class="icon2 fas fa-check"></span>
               </div>
            </div>
            <div class="error-text">
               Please Enter Valid Email Address
            </div>
            <button>Submit</button>
         </form>
      </div>
      <script>
         const email = document.querySelector("#email");
         const icon1 = document.querySelector(".icon1");
         const icon2 = document.querySelector(".icon2");
         const error = document.querySelector(".error-text");
         const btn = document.querySelector("button");
         let regExp = /^[^ ][email protected][^ ]+\.[a-z]{2,3}$/;
         function check(){
           if(email.value.match(regExp)){
             email.style.borderColor = "#27ae60";
             email.style.background = "#eafaf1";
             icon1.style.display = "none";
             icon2.style.display = "block";
             error.style.display = "none";
             btn.style.display = "block";
           }else{
             email.style.borderColor = "#e74c3c";
             email.style.background = "#fceae9";
             icon1.style.display = "block";
             icon2.style.display = "none";
             error.style.display = "block";
             btn.style.display = "none";
           }
           if(email.value == ""){
             email.style.borderColor = "lightgrey";
             email.style.background = "#fff";
             icon1.style.display = "none";
             icon2.style.display = "none";
             error.style.display = "none";
             btn.style.display = "none";
           }
         }
      </script>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #f2f2f2
}
.content{
  max-width: 400px;
  padding: 20px;
  background: #fff;
  text-align: center;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
}
.content header{
  padding-top: 5px;
  font-size: 27px;
  font-weight: 600;
  line-height: 33px;
}
.content form{
  margin: 20px 27px;
}
.content form .field{
  width: 100%;
  height: 45px;
  display: flex;
  position: relative;
}
form .field input{
  width: 100%;
  height: 100%;
  border: 1px solid lightgrey;
  border-radius: 5px;
  padding-left: 15px;
  font-size: 18px;
  outline: none;
}
form .field .icons{
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
.field .icons span{
  height: 25px;
  width: 25px;
  border: 2px solid;
  border-radius: 50%;
  line-height: 25px;
  display: none;
}
.field .icons span.icon1{
  color: #e74c3c;
  border-color: #e74c3c;
}
.field .icons span.icon2{
  color: #27ae60;
  border-color: #27ae60;
}
form .error-text{
  position: relative;
  margin: 15px 0 -5px 0;
  background: #e74c3c;
  color: #fceae8;
  font-size: 18px;
  padding: 8px;
  border-radius: 5px;
  user-select: none;
  display: none;
}
form .error-text:before{
  position: absolute;
  content: '';
  height: 15px;
  width: 15px;
  background: #e74c3c;
  right: 20px;
  top: -7px;
  transform: rotate(45deg);
}
form button{
  margin-top: 10px;
  width: 100%;
  height: 45px;
  border: none;
  outline: none;
  border-radius: 5px;
  background: #27ae60;
  color: #f2f2f2;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  cursor: pointer;
  display: none;
  transition: 0.3s;
}
form button:hover{
  background: #219150;
}

That’s all, now you’ve successfully created an Email Validation Check in HTML CSS & JavaScript. If your code not work or you’ve faced any error/problem then please comment down or contact us from the contact page.



Previous articleAnimated 3D Flip Buttons using HTML & CSS
Next articleCSS3 Neomorphic Social Media Buttons
CodingNepal is a blog where we post blogs related to HTML CSS JavaScript & PHP along with creative coding stuff and free source code files.

6 COMMENTS

  1. One Error, When You Press “Enter” It Leads You To Your Website Aftermath even without a correct email. What Do I Do?

LEAVE A REPLY

Please enter your comment!
Please enter your name here