How To: Create jQuery Login Form with Animated validation Effect.

I will show you how to create a simple jquery validation based login form. Some animation is used to get effects and its simple and easy to use.

http://demos.99points.info/login_form/

jQuery Code

function chkForm ()
{
	chkEmail();
	chkPassword();
}
	
function chkEmail(){
	//testing regular expression
	var a = $("#email").val();
	var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
	//if it's valid email
	if(filter.test(a))
	{
		$('#tube').animate({ width: 'show' });
		return false;
	}
	else
	{
		
		$('#tube').animate({ width: 'hide' });
		return false;	
	}		
}

function chkPassword()
{
	var pass1 = $("#password");
	
	if(pass1.val().length &lt; 5){
		$('#tube2').animate({ width: 'hide' });
		return false;
	}
	else
	{
		$('#tube2').animate({ width: 'show' });
	}

}

function chkForm ()

{

chkEmail();

chkPassword();

}

function chkEmail(){

//testing regular expression

var a = $("#email").val();

var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;

//if it's valid email

if(filter.test(a))

{

$('#tube').animate({ width: 'show' });

return false;

}

else

{

$('#tube').animate({ width: 'hide' });

return false;

}

function chkPassword()

{

var pass1 = $("#password");

if(pass1.val().length < 5){

$('#tube2').animate({ width: 'hide' });

return false;

}

else

{

$('#tube2').animate({ width: 'show' });

}

CSS

#customForm input{
	width: 220px;
	float:left;
	padding: 4px;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	font-size: 11px;
	border: 1px solid #CCCCCC;
	}
	input#button{
	width: 244px;
	 float:left;
	padding: 4px;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	font-size: 11px;
	border: 1px solid #CCCCCC;
}
     #outer{ width:230px; padding:8px; 
	background:#336699;
	height:30px;
		
	color:#fff;
	float:left;
	margin-bottom:5px;
	font-weight:bold;
	-moz-border-radius: 6px;
	font-size:12px;
	-webkit-border-radius: 6px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);}
	#slide{ 
		width:200px; height:45px; float:left;
		background:url(errorEm.GIF) center left no-repeat;
		}
	#slide2{ 
		width:200px; height:45px; float:left;
		background:url(errorPass.GIF) center left no-repeat;
		}
	#outer em{ font-weight:normal; font-size:11px; font-style:normal; }
	#tube{ width:200px; height:50px; float:left;background:#FFFFFF;width:200px;}
	#tube2{ width:200px; height:50px; float:left;background:#FFFFFF;width:200px;}

#customForm input{

width: 220px;

float:left;

padding: 4px;

text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

border-bottom: 1px solid rgba(0,0,0,0.25);

font-size: 11px;

border: 1px solid #CCCCCC;

}

input#button{

width: 244px;

float:left;

padding: 4px;

text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

border-bottom: 1px solid rgba(0,0,0,0.25);

font-size: 11px;

border: 1px solid #CCCCCC;

}

#outer{ width:230px; padding:8px;

background:#336699;

height:30px;

color:#fff;

float:left;

margin-bottom:5px;

font-weight:bold;

-moz-border-radius: 6px;

font-size:12px;

-webkit-border-radius: 6px;

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

border-bottom: 1px solid rgba(0,0,0,0.25);}

#slide{

width:200px; height:45px; float:left;

background:url(errorEm.GIF) center left no-repeat;

}

#slide2{

width:200px; height:45px; float:left;

background:url(errorPass.GIF) center left no-repeat;

}

#outer em{ font-weight:normal; font-size:11px; font-style:normal; }

#tube{ width:200px; height:50px; float:left;background:#FFFFFF;width:200px;}

#tube2{ width:200px; height:50px; float:left;background:#FFFFFF;width:200px;}

FORM

Password Minimum 5 characters

Posts

How To: Create jQuery Login Form with Animated validation Effect.

jQuery Code

CSS

FORM

1 thought on “How To: Create jQuery Login Form with Animated validation Effect.”

jQuery Code

CSS

FORM

Few More Brilliant Posts !

1 thought on “How To: Create jQuery Login Form with Animated validation Effect.”