This is a simple and subtle project that can be put in a resume, It will help gain good expression among the projects you will work on. Also, it is a good project to use in your website/portfolio/project.

Email Validation Using Regex in Javascript | Simple but Useful Thing

How to Do an Email Validation in JavaScript (Regex)

Hello Everyone 👋 Welcome to My New Blog. Today I have made an Email Validation with the help of HTML, CSS & Javascript 😍

I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.

Let's start making this input field step by step.

Video of the project,

So that was the preview now let us start making the project 😄 First, we will code HTML then CSS & finally JS, and also I have shared codepen ink to make it easier for you.

HTML 🎈( step - 1)

In HTML we have made a div for the input field container. Also, we have used svgs for the animation of correct animation.

<div class="email-input">
    <input type="email" placeholder="xyz@gmail.com">
    <svg viewBox="0 0 18 18">
        <path d="M11.5,10.5 C6.4987941,17.5909626 1,3.73719105 11.5,6 C10.4594155,14.5485365 17,13.418278 17,9 C17,4.581722 13.418278,1 9,1 C4.581722,1 1,4.581722 1,9 C1,13.418278 4.581722,17 9,17 C13.418278,17 17,13.42 17,9"></path>
        <polyline points="5 9.25 8 12 13 6"></polyline>
    </svg>
</div>

After the HTML we will design the input and will make an amazing design of the input field

OUTPUT OF HTML

CSS🎈( step - 2)

.email-input {
  --text: #646b8c;
  --text-placeholder: #bbc1e1;
  --icon: #a6accd;
  --icon-focus: #646b8c;
  --icon-invalid: #f04949;
  --icon-valid: #16bf78;
  --background: #fff;
  --border: #d1d6ee;
  --border-hover: #a6accd;
  --border-focus: #275efe;
  --shadow-focus: rgba(39, 94, 254, 0.32);
  position: relative;
  max-width: 220px;
}
.email-input input {
  width: 100%;
  -webkit-appearance: none;
  outline: none;
  display: block;
  font-size: 14px;
  font-family: inherit;
  margin: 0;
  padding: 8px 16px 8px 41px;
  line-height: 26px;
  border-radius: 6px;
  color: var(--text);
  border: 1px solid var(--bc, var(--border));
  background: var(--background);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.email-input input::-moz-placeholder {
  color: var(--text-placeholder);
}
.email-input input:-ms-input-placeholder {
  color: var(--text-placeholder);
}
.email-input input::placeholder {
  color: var(--text-placeholder);
}
.email-input svg {
  width: 16px;
  height: 16px;
  top: 14px;
  left: 14px;
  display: block;
  position: absolute;
  fill: none;
  stroke: var(--i, var(--icon));
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  transition: stroke 0.3s;
}
.email-input svg path {
  stroke-dasharray: 80;
  stroke-dashoffset: var(--path, 170);
  transition: stroke-dashoffset 0.5s ease var(--path-delay, 0.3s);
}
.email-input svg polyline {
  stroke-dasharray: 12;
  stroke-dashoffset: var(--tick, 12);
  transition: stroke-dashoffset 0.45s ease var(--tick-delay, 0s);
}
.email-input:hover {
  --bc: var(--border-hover);
}
.email-input:focus-within {
  --bc: var(--border-focus);
  --i: var(--icon-focus);
}
.email-input:focus-within input {
  box-shadow: 0 1px 6px -1px var(--shadow-focus);
}
.email-input:not(.valid) input:not(:-moz-placeholder-shown):not(:focus) + svg {
  --i: var(--icon-invalid);
}
.email-input:not(.valid) input:not(:-ms-input-placeholder):not(:focus) + svg {
  --i: var(--icon-invalid);
}
.email-input:not(.valid) input:not(:placeholder-shown):not(:focus) + svg {
  --i: var(--icon-invalid);
}
.email-input.valid {
  --i: var(--icon-valid);
  --path: 132;
  --path-delay: 0s;
  --tick: 0;
  --tick-delay: 0.3s;
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  display: flex;
  font-family: "Inter UI", "Inter", Arial;
  justify-content: center;
  align-items: center;
  background: #f6f8ff;
}
body .email-input {
  width: 100%;
}
body .dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
}
body .dribbble img {
  display: block;
  height: 28px;
}
body .twitter {
  position: fixed;
  display: block;
  right: 64px;
  bottom: 14px;
}
body .twitter svg {
  width: 32px;
  height: 32px;
  fill: #1da1f2;
}

Now we have done the CSS coding as well, now let's move to javascript. in javascript, we have not done enough coding. we have written for making buttons work. Also, we have used regex for more flexibility.

JavaScript🎈( step - 3)

const regex = new RegExp(
    '^(([^<>()[\\]\\\\.,;:\\s@\\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\\"]+)*)|' +
        '(\\".+\\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])' +
        "|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$"
);

document.querySelectorAll(".email-input").forEach((container) => {
    let input = container.querySelector("input");

    input.addEventListener("keyup", (e) =>
        container.classList.toggle("valid", regex.test(input.value))
    );
});

All the coding part is done, now let us see the final output, and also below I have mentioned the codepen link.

Final Output

The codepen link is here for making your work easier!

Click here for the code!

Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.

More blogs you should give a check!

Pexels Website Clone With HTML< CSS and Javascript
Word Counter In Angular JS
Responsive Newsletter in CSS
Dark And Night mode toggle button in javascript
Best Youtube Channels For Learning Coding
Top-notch Project ideas For HTML< CSS< Javascript
Best Platform To sell your Website Templates
Google Homepage Clone With Html and CSS

How to Do an Email Validation in JavaScript (Regex)