Email Validation JavaScript – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Wed, 17 May 2023 06:44:42 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Email Validation in HTML CSS and JavaScript https://www.codingnepalweb.com/email-validation-in-html-css-javascript/ https://www.codingnepalweb.com/email-validation-in-html-css-javascript/#respond Fri, 02 Jul 2021 21:11:18 +0000 https://www.codingnepalweb.com/?p=4214 Email Validation in HTML CSS and JavaScript

Hello friends, To we are going to learn Email Validation in HTML CSS, and JavaScript. There are various CSS designs that I have created before like Login Form or Sign up Form and Contact Form but to date, I haven’t validated the email address. So without further ado let’s get started.

Email validation means the process of validating an email to get the right email ID from the user while they going to log in or signup. Mostly an Email validation program is used in the login for registration form.

Let’s have a look at the given image of our program [Email Validation in HTML CSS and JavaScript], There are two images inside the image. On the top image, we can see a red border, exclamation sign, and letter with some error text, that undoubtedly shows us that is an invalid email

In the second image we can see the correct email id inside the input field that’s why our input field’s border is in blue color, tick sign at right, and some message on the bottom, that shows us that the email is valid.

Actually very first that email input field’s border color is grey and the email field looks like it is in an inactive condition. When we click or focus on the input field its border-color changes into blue and the input field looks like it is at the active condition

To see the virtual example of this program [Email Validation in HTML CSS and JavaScript], and every code that I have used to make this email validation perfectly work, you have to watch the video tutorial of this email validation in HTML CSS and JavaScript which I have given below:

Email Validation in HTML CSS and JavaScript

I have provided all source code files this Email validation in HTML CSS and JavaScript below, but till then let me explain some important topics that we have seen on the video tutorial.

As you have seen on the video tutorial [Email Validation in HTML CSS and JavaScript]. At first, we saw one input field with a grey border, a placeholder with the text enter your email, and a button. When I focused on the input field, its border colors turns into blue.

When I clicked in the check button without entering an email id the input fields border transform into red, one sign, and some error text “email can’t be blank” appears with red color. When I entered an invalid email id then all colors and signs are in constant form but the error text changes into “please enter a valid email”.

But, the last time when I entered a valid email border changes into blue color, the error sign in to tick sign, and the error text changes to “this is a valid email” with blue color. These all color combination, text and sign helps to find out the valid email address. I have used regular expression [regex] pattern to validate this email perfectly

I hope now you have understood all concepts and code behind creating this simple email validation in JavaScript, and I assume that you can easily build this type of email validation. If you are feeling difficulties to make this program then you can take all source code of this email validation form below, you can also download all source code files.

You Might Like This

Email Validation HTML CSS JavaScript [Source Code]

To take all HTML CSS and JavaScript code of this program [Email Validation in HTML CSS and JavaScript] from, but at first, you need to create three files one is HTML file another is CSS file and the last one is JavaScript file. After creating these three files, you can copy-paste all codes in your document. You can also download all source code files by clicking on the given download button.
To get the HTML code of this email validation, create a file on your computer with the name of index.html and copy-paste the given HTML code in your document.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
   <title> Email Validation in JavaScript | CodingLab </title> 
    <link rel="stylesheet" href="style.css">
    <!-- Fontawesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<body>
  <form action="#">
    <div class="input-box">
      <input class="input" type="text" placeholder="Enter your email">
      <i class="fas fa-envelope email-icon"></i>
      <i class="fas fa-exclamation-circle error-icon"></i>
      <i class="fas fa-check-circle passed-icon"></i>
      <input class="button" type="submit" value="Check">
    </div>
    <p class="text"></p>
  </form>
  <script>
  //getting all attribute
  const form = document.querySelector("form"),
  eInput = form.querySelector(".input"),
  text = form.querySelector(".text");

  form.addEventListener("submit", (e)=>{
    e.preventDefault(); //preventing form from submitting
    let pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/; //Regex pattern to validate email
    form.classList.add("error");
    form.classList.remove("valid");
    if(eInput.value == ""){
      text.innerText = "Email can't be blank";
    }else if (!eInput.value.match(pattern) ) { //if patter is not matched with user's enter value
      text.innerText = "Please enter a valid email";
    }else{
      form.classList.replace("error" , "valid"); //replacing error class with valid class
      text.innerText = "This is a valid email";
    }
  });
  </script>
</body>
</html>

 /* Google Font CDN Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins" , sans-serif;
}
body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#4671EA,#AC34E7);
  padding: 0 20px;
}
form{
  max-width: 550px;
  width: 100%;
  background: #fff;
  padding: 30px;
  border-radius: 4px;
}
form .input-box{
  display: flex;
  height: 55px;
  align-items: center;
  position: relative;
}
.input-box input{
  height: 100%;
  outline: none;
  border: 2px solid #bfbfbf;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 500;
  padding: 0 45px;
  transition: all 0.3s ease;
}
.input-box input.input{
  width: 75%;
  margin-right: 20px;
}
form.valid .input-box input.input{
  border-color: #4671EA;
}
.input-box input.input:focus{
  border-color: #4671EA;
}
form.error input.input{
  border-color: #de0611;
}
.input-box input.button{
  width: 25%;
  padding: 0;
  color: #fff;
  background: #4671EA;
  border: none;
  cursor: pointer;
}
.input-box input.button:hover{
  background: #1748cf;
}
.input-box i{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
}
.input-box i.email-icon{
  color: #bfbfbf;
  left: 15px;
  transition: all 0.3s ease;
}
form.valid i.email-icon{
  color: #1748cf;
}
.input-box input.input:focus ~ i.email-icon{
  color: #1748cf;
}
.input-box .error-icon,
.input-box .passed-icon{
  color: #de0611;
  left: calc(75% - 60px);
  display: none;
}
form.error .error-icon{
  display: block;
}
.input-box .passed-icon{
  color: #1748cf;
}
form.valid .passed-icon{
  display: block;
}
form .text{
  color: #de0611;
  font-size: 16px;
  font-weight: 500;
  margin: 10px 0 -10px 2px;
}
form.valid .text{
  color: #1748cf;
}

If you face any difficulties while creating your Valid Email Checker or your code is not working as expected, you can download the source code files for this Valid Email Checker for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

]]> https://www.codingnepalweb.com/email-validation-in-html-css-javascript/feed/ 0 Email Validation in HTML CSS & JavaScript https://www.codingnepalweb.com/email-validation-in-html-javascript/ https://www.codingnepalweb.com/email-validation-in-html-javascript/#comments Sat, 30 May 2020 13:01:00 +0000 https://codingnepalweb.com/2020/05/30/email-validation-check-in-html-css-javascript/ Email Validation in HTML CSS & JavaScript

Hey friends, today in this blog you’ll learn how to do Email Validation in HTML CSS & JavaScript. Earlier I have shared many Login Form Designs but there are no features of the Email Validation. So, it’s time to do Simple Email Validation in HTML & JavaScript.

Email Validation is a method that verifies if the user entered email address is valid or not. If an email is not valid then we can show an error message to inform the user about it.

In this small project (Email Validation in HTML), as you can in the image preview, there are two boxes with input. In the first box input, I have entered an invalid email address so there is shown a tooltip with an error message and in the second box input, I have entered a valid email address so there is shown the submit button with the green background.

You may know, the red color indicates an error and the green color indicates success. So I used these colors to inform the user about their entered email. You can also watch a demo video or tutorial of this Email Validation in HTML.

Video Tutorial of Email Validation in HTML

In the video, you have seen the demo of this Email Validation in HTML & JavaScript and also how I did validation using only HTML CSS & JavaScript. To validate the user-entered email address first I written a regex pattern for validation and match the user entered inputs with this pattern.

If the user entered email address is matched with the given pattern that means the user has entered a valid email else entered email is not valid. I hope you like this Email Validation in HTML CSS & JavaScript and want to get the source codes of this small project. But don’t worry I have given all codes to the bottom of this page and you can copy-paste.

You might like this:

Email Validation in HTML & JavaScript [Source Codes]

To create this Email Validation in HTML CSS & JavaScript. First, you need to create two Files: HTML and CSS File. After creating these files just paste the following codes in your file. You may have questions about why you don’t need to create a JavaScript file right? Well, I’ve written all JavaScript codes inside an HTML file so you have to paste all JS codes inside <script>…JS Codes…</script> tag.

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 in HTML & JavaScript | 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 = /^[^ ]+@[^ ]+\.[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 input field that checks Email Validation in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.

If you have already created a login form then you can use these validation codes to validate your email address or if you have basic knowledge of JavaScript then you can do password validation, username validation, and many more using this email validation concept.

]]> https://www.codingnepalweb.com/email-validation-in-html-javascript/feed/ 7