Email Validator using HTML, CSS and JavaScript - Coding Torque

Email Validator

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 🚀.

Let's go step by step:

Step 1: HTML Code

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

Step 2: CSS(SCSS) Code

.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

Step 3: JavaScript Code

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

});

Code Credits: @aaroniker

Written by: Piyush Patil

If you want me to code any project or post any specific post, feel free to DM me at IG @code.scientist or @codingtorque

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

Hope you find this post helpful💖 

 

 Follow us on Instagram for more projects like this👨‍💻 

- @code.scientist 

- @codingtorque  

- @codingknights