Email Input Validation behavior - JS and SCSS

email-input-validation-behavior-js-and-scss.markdown

Email Input Validation behavior - JS and SCSS

#####Email Input Validation

A Pen by Elior Tabeka on CodePen.

License.

index.slim

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>

script.babel

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

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

style.scss

// 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;
		}
	}

styles

<link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet" />