Email validation animation

email-validation-animation.markdown

Email validation animation

Simple animation if the email is valid

Dribbble Shot

A Pen by Aaron Iker on CodePen.

License.

index.html

<div class="email">
    <input type="text" placeholder="[email protected]">
    <svg viewBox="0 0 16 16">
        <path d="M10.8000002,10.8000002 C9.85000038,11.6500006 9.18349609,12 8,12 C5.80000019,12 4,10.1999998 4,8 C4,5.80000019 5.80000019,4 8,4 C10.1999998,4 12,6 12,8 C12,9.35332031 12.75,9.5 13.5,9.5 C14.25,9.5 15,8.60000038 15,8 C15,4 12,1 8,1 C4,1 1,4 1,8 C1,12 4,15 8,15 C12,15 15,12 15,8"></path>
        <polyline points="5 8.375 7.59090909 11 14.5 4" transform='translate(0 -0.5)'></polyline>
    </svg>
</div>

<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/4779275-Email-validation-animation" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-1col-dnld-e29e0436f93d2f9c430fde5f3da66f94493fdca66351408ab0f96e2ec518ab17.png" alt=""></a>

script.js

$(document).ready(function() {

    var 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,}))$'
    );

    $('.email input').on('keyup', function(e) {
        $(this).parent().toggleClass('success', regex.test($(this).val()));
    });

});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

style.scss

$border: #D1D7E3;
$success: #69DD95;
$textColor: #797C86;
$placeholderColor: #C7C8CC;
$inputBorder: 0;
$inputShadow: 0 4px 12px -2px rgba(#6B75A1, .16);

.email {
    position: relative;
    width: 100%;
    max-width: 240px;
    input {
        outline: none;
        width: 100%;
        font-size: 16px;
        border: $inputBorder;
        border-radius: 4px;
        line-height: 24px;
        padding: 8px 36px 8px 14px;
        box-shadow: $inputShadow;
        color: $textColor;
        &::-webkit-input-placeholder {
            color: $placeholderColor;
        }
        &:-moz-placeholder {
            color: $placeholderColor;
        }
        &::-moz-placeholder {
            color: $placeholderColor;
        }
        &:-ms-input-placeholder {
            color: $placeholderColor;
        }
    }
    svg {
        position: absolute;
        z-index: 1;
        right: 14px;
        top: 50%;
        width: 20px;
        height: 20px;
        fill: none;
        margin: -10px 0 0 0;
        polyline,
        path {
            stroke: $border;
            stroke-width: 1.4;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: stroke .3s ease 0s;
        }
        path {
            stroke-dasharray: 64;
            stroke-dashoffset: 127;
            transition: stroke-dasharray .8s ease .8s, stroke-dashoffset .8s ease .5s;
        }
        polyline {
            stroke-dasharray: 18;
            stroke-dashoffset: 18;
            transition: stroke-dashoffset .5s ease 0s;
        }
    }
    &.success {
        svg {
            polyline,
            path {
                stroke: $success;
            }
            path {
                stroke-dasharray: 46;
                stroke-dashoffset: 150;
                transition: stroke-dasharray .6s ease 0s, stroke-dashoffset .8s ease .3s, stroke .3s ease .6s;
            }
            polyline {
                stroke-dashoffset: 0;
                transition: stroke-dashoffset .5s ease .6s, stroke .3s ease .6s;
            }
        }
    }
}

html {
    box-sizing: border-box;
}

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

// Center
body {
    min-height: 100vh;
    font-family: Roboto, Arial;
    color: #ADAFB6;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FAFAFC;
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        opacity: .5;
        transition: all .4s ease;
        &:hover {
            opacity: 1;
        }
        img {
            display: block;
            height: 36px;
        }
    }
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet" />