HTML5 Form Demo

by Prasad

HTML

<div class="wrapper">
<form name="demo" method="post" id="demo">
	<input type="name" placeholder="UserName" name="uname" id="input_normal" spellcheck>
    <input type="password" placeholder="Password" name="pass" id="input_normal" pattern="[A-Z]{8}" maxlength="8">
</form>

</div>

CSS

.wrapper
{
	width:96%;
	margin:0 2%;
	border-bottom:1px solid #dadada;
}
#missing_input
{
	border:1px solid red;
}
#input_normal
{
	border:1px solid #dadada;
}
#input_passed
{
	border:2px solid #dadada;
}

JavaScript

$(document).ready(function(){
setheight();
});$(document).ready(function(){
	$("#demo :input[type=password]").keypress(function(event){
	if(event.which == 13)
	{	/*Get all the input in form and then check for empty using val*/
		$('#demo').submit();
	}							
	});
$('#demo').submit(function(){
	$('#demo :input').each(function(){
			len=$(this).val();
			value=$("#demo :input").val();
			if(len === "")
				{	
					fld=$(this).attr('name');
					$(this).attr('id','missing_input');
					$(this).attr('placeholder',"Please enter "+fld);

				}
			else
			{
				$(this).attr('id','input_passed');				
			}
			});	
			return false;
	});
	
});
function setheight()
{
	var wh=$(window).innerHeight();
	wh=(wh*97)/100;
	$('.wrapper').height(wh +'px');
	/*alert("window height: "+wh);*/
}
$(window).resize(function(){
	setheight();
});