Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Email validation animation
<div class="email">
<input type="text" placeholder="test@test.com">
<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>
$(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()));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
$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;
}
}
}
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.