valid email checker – 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. Sun, 14 May 2023 07:37:09 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 How to Validate Email in HTML CSS & JavaScript | Email Checker https://www.codingnepalweb.com/create-email-checker-javascript/ https://www.codingnepalweb.com/create-email-checker-javascript/#respond Wed, 10 Aug 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4165 How to Validate Email in HTML CSS & JavaScript | Email Checker

Hello friend, I hope you are doing and creating awesome projects. Today in this blog you will learn to Validate an Email Address in HTML CSS and JavaScript. There are lots of validation projects that you can found on this blog like Email Validation, password, and confirm password validation.

An Email Validation means authenticating the email address that the user filled. You can see on the apps of the website where a login or signup form available and we need to enter our email address and password to register. For such things, a valid email address is needed.

Let’s have a quick look at the given image of our project [How to Validate Email Address]. On the image, you can see three input fields with text and icons. On the first input email field, we can see it is empty, on the second input email field, we can see an invalid email that’s why the icon color is red and on the third input email field, we can see a valid email that’s why the color of the icon is green and check icon. The color icons will automatically while you are typing the email.

You can watch the real demo of this email checker by watching the given video tutorial. Also by watching the given video tutorial, you will get the idea of how all HTML CSS, and JavaScript code are working behind this email validator.

Validate Email Address in JavaScript | Email Checker

I have provided all the HTML CSS and JavaScript code that I have used to create this Email Checker. Before getting into the source code file, I would like to explain the given video tutorial of email validators briefly.

As you have seen in the video tutorial on Email verifiers. At first, there was an empty input email field with grey colored icon, when I started to type my email the icon changed to red color and when I completed my email address with a valid email address, the icon colored change to green with a check icon.

To make the UI design of the input field I have used HTML and CSS only to validate the email address and change the color of the icon and icon, I have used some JavaScript Code, and to validate the email address I have used some regex pattern.

I hope, now you can create this Email Checker using HTML CSS, and JavaScript, if you are feeling difficulty validating the email address, I have provided all the source code below.

You Might Like This:

Email Checker [Source Code]

To get the following HTML and CSS code for the Email Checker you need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>JavaScript Email Vaidation</title>

    <!-- CSS -->
    <link rel="stylesheet" href="css/style.css" />

    <!-- Unicons CSS -->
    <link
      rel="stylesheet"
      href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"
    />
  </head>
  <body>
    <div class="input-field">
      <input type="email" placeholder="Enter your email" spellcheck="false"/>
      <i class="uil uil-envelope email-icon"></i>
    </div>

    <!-- JavaScript -->
    <script>
      const input = document.querySelector("input"),
            emailIcon = document.querySelector(".email-icon")

            input.addEventListener("keyup", () =>{
              let pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;

              if(input.value === ""){
                emailIcon.classList.replace("uil-check-circle", "uil-envelope");
                return emailIcon.style.color = "#b4b4b4";
              }
              if(input.value.match(pattern)){
                emailIcon.classList.replace("uil-envelope", "uil-check-circle");
                return emailIcon.style.color = "#4bb543"
              }
              emailIcon.classList.replace("uil-check-circle", "uil-envelope");
              emailIcon.style.color = "#de0611"
            })
    </script>
  </body>
</html>


/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e3f2fd;
}
.input-field {
  position: relative;
  height: 50px;
  width: 280px;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.input-field input {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  border-radius: 6px;
  padding: 0 15px;
  font-size: 15px;
  font-weight: 400;
  color: #333;
}
input::placeholder {
  color: #b4b4b4;
}
.input-field .email-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: #b4b4b4;
}

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.

View Live Demo

 

]]> https://www.codingnepalweb.com/create-email-checker-javascript/feed/ 0 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