<form id="form">
	<div>
		<label for="username">Username</label>
		<input name="username" type="text" placeholder="Username" pattern="[a-z]{1,15}" id="username">
	</div>
</form>

	html {
		box-sizing: border-box;
	}

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

	body {
		font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
		background-color: #ECEFF1;
	}
	form {
		max-width: 300px;
		margin-top: 60px;
		margin-right: auto;
		margin-left: auto;
		text-align: left;
		position: relative;
		padding-top: 80px;
	}
	label,
	input {
			display: block;
	}
	label {
		font-size: 12px;
		text-transform: uppercase;
		color: #B0BEC5;
		margin-bottom: 10px;
	}
	input {
			width: 100%;
			padding: 10px;
			outline: 0;
			border: 2px solid #B0BEC5;
	}
	input.invalid {
			border-color: #DD2C00;
	}

	#notify {
		margin-top: 5px;
		padding: 10px;
		font-size: 12px;
		width: 100%;
		color: #fff;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	#notify.error {
		background-color: #DD2C00;
	}

(function() {
	
	var input              = document.getElementById('username');
	var	form               = document.getElementById('form');
	var	elem               = document.createElement('div');
			elem.id            = 'notify';
			elem.style.display = 'none';

			form.appendChild(elem);

	input.addEventListener('invalid', function(event){
		event.preventDefault();
		if ( ! event.target.validity.valid ) {
			input.className    = 'invalid animated shake';
			elem.textContent   = 'Username should only contain lowercase letters e.g. john';
			elem.className     = 'error';
			elem.style.display = 'block';
		}
	});

	input.addEventListener('input', function(event){
		if ( 'block' === elem.style.display ) {
			input.className = '';
			elem.style.display = 'none';
		}
	});

})();