Email Validator using HTML, CSS and JavaScript - Coding Torque

Hello Guys! Welcome to Coding Torque. In this blog, I’m going to explain to you how to make an Email Validator using HTML, CSS and JavaScript. You can use this effect on your website/portfolio to showcase any skills/features. This will be a step-by-step guide. Let’s get started 🚀.

Before we start, here are some JavaScript Games you might like to create:

1. Snake Game using JavaScript

2. 2D Bouncing Ball Game using JavaScript

3. Rock Paper Scissor Game using JavaScript

4. Tic Tac Toe Game using JavaScript

5. Whack a Mole Game using JavaScript

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Email Validator using JavaScript - @codingtorque</title>
</head>

<body>
    <!-- Further code here -->
</body>

</html>

Paste the below code in your `<body>` tag

<div class="email-input">
    <input type="email" placeholder="aaron@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>

<!-- dribbble - twitter -->
<a class="dribbble" href="https://dribbble.com/ai" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
<a class="twitter" target="_blank" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>

CSS Code

Create a file style.css and paste the code below.

.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(#275EFE, .32)};
    position: relative;
    max-width: 220px;
    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 .3s, box-shadow .3s;
        &::placeholder {
            color: var(--text-placeholder);
        }
    }
    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 .3s;
        path {
            stroke-dasharray: 80;
            stroke-dashoffset: var(--path, 170);
            transition: stroke-dashoffset .5s ease var(--path-delay, .3s);
        }
        polyline {
            stroke-dasharray: 12;
            stroke-dashoffset: var(--tick, 12);
            transition: stroke-dashoffset .45s ease var(--tick-delay, 0s);
        }
    }
    &:hover {
        --bc: var(--border-hover);
    }
    &:focus-within {
        --bc: var(--border-focus);
        --i: var(--icon-focus);
        input {
            box-shadow: 0 1px 6px -1px var(--shadow-focus);
        }
    }
    &:not(.valid) {
        input {
            &:not(:placeholder-shown) {
                &:not(:focus) {
                    & + svg {
                        --i: var(--icon-invalid);
                    }
                }
            }
        }
    }
    &.valid {
        --i: var(--icon-valid);
        --path: 132;
        --path-delay: 0s;
        --tick: 0;
        --tick-delay: .3s;
    }
}

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

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

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

Output Till Now

email validator using javascript with source code

JavaScript Code

Create a file script.js and paste the code below.

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)))

});

Written by: Piyush Patil

Code Credits: @aaroniker

If you have any doubts or any project ideas feel free to Contact Us

Hope you find this post helpful💖