Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Email Input Validation behavior - JS and SCSS
div.register
div.field
input#register type="text" maxlength="21"
label for="register"
span Email Address
button OK
p Inspired by <a href="https://dribbble.com/shots/2359423-Daily-UI-026-Subscribe" target="_blank">Derek Torsani</a>
var $form = $('.register');
function validateEmail(email) {
var regex = /^(([^<>()\[\]\\.,;:\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,}))$/;
return regex.test(email);
};
$form.on('keyup', 'input', function(e) {
var $this = $(this),
$input = $this.val();
if ($input.length > 0) {
$form.find('label').addClass('active');
if (validateEmail($input)) {
$form.find('button').addClass('active');
console.log(e);
if (e.which === 13) {
$form.find('button').click();
$this.blur();
}
} else {
$form.find('button').removeClass('active');
}
$(this).addClass('active');
} else {
$form.find('label').removeClass('active');
$form.find('button').removeClass('active');
$(this).removeClass('active');
}
});
$form.on('click', 'button.active', function(e) {
e.preventDefault;
var $this = $(this);
$(this).addClass('full');
$(this).html('Thanks!');
setTimeout(()=> {
$form.find('input').val('').removeClass('active');
$form.find('label').removeClass('active');
$this.removeClass('full active');
$this.html('OK');
}, 1200);
})
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
// Inspired by Derek Torsani :
// https://dribbble.com/shots/2359423-Daily-UI-026-Subscribe
@mixin size($width: null, $height: $width) {
width: $width;
height: $height;
}
%reset {
margin: 0;
padding: 0;
}
html,
body {
@include size($width: 100%);
@extend %reset;
overflow: hidden;
}
*,
*:before,
*:after {
box-sizing: border-box;
outline: none;
}
body {
background: linear-gradient(
to bottom,
#639EDB,
#0668CF
) no-repeat;
font-family: 'Arimo', sans-serif;
background-size: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
p {
text-align: center;
color: #ffffff;
font-size: 13px;
}
a {
&:hover,
&:visited,
&:hover,
&:link {
color: rgba(255, 255, 255, 0.6);
}
}
.register {
margin: 0 auto 0;
display: flex;
justify-content: center;
align-items: center;
}
.field {
width: 385px;
height: 70px;
position: relative;
input {
width: 100%;
border-radius: 6px;
height: 70px;
border: 0;
padding: 10px;
padding: 20px 0 0 16px;
font-size: 0;
background: #1566BB;
transition: background .3s ease;
color: #ffffff;
&:focus {
background: #065CB7;
font-size: 23px;
&::selection {
background: rgba(188, 232, 255, 0.5);
}
}
&.active {
background: #065CB7;
font-size: 23px;
}
}
input,
button {
position: absolute;
height: 70px;
}
button {
background: rgba(0, 0, 0, 0.3);
right: 0;
border: 0;
width: 115px;
border-radius: 6px;
font-size: 22px;
cursor: pointer;
transition:
width .3s ease,
background .3s ease,
opacity .3s ease;
opacity: 0;
color: #065CB7;
text-transform: uppercae;
pointer-events: none;
&.active {
color: #ffffff;
background: #639EDB;
opacity: 1;
pointer-events: auto;
&:hover {
background: #5E99D6;
}
}
&.full {
width: 100%;
}
}
input:focus + label {
font-size: 19px;
transform: translate(16px, 11px);
color: rgba(255, 255, 255, 0.7);
}
label {
position: absolute;
color: rgba(255, 255, 255, 1);
transform: translate(16px, 20px);
transition:
transform .3s ease,
font-size .3s ease,
color .3s .1s ease;
font-size: 28px;
&.active {
font-size: 19px;
transform: translate(16px, 11px);
color: rgba(255, 255, 255, 0.7);
}
}
input:focus + label + button {
opacity: 1;
}
}
<link href="https://fonts.googleapis.com/css?family=Arimo" 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.