May
21

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

Author ZeeShaN    Category CSS, JQuery, PHP, Web Development     Tags ,

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

#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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div id="container">
		<div id="outer">
				Email&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input id="email" name="email" type="text" value="" onblur="return chkEmail();" />
		</div>
		<div id="slide"><div id="tube">&nbsp;</div></div>
		<br clear="all" />
		<div id="outer">
			Password 
			<input id="password" name="password" type="password" value="" onblur="return chkPassword();" />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<em>Minimum 5 characters</em>
		</div>
		<div id="slide2"><div id="tube2">&nbsp;</div></div>
		<br clear="all" />
		<br clear="all" />
		<input type="button" name="submit" value="Submit Now !" id="button" onclick="chkForm()" />
</div>

Add To Facebook Stumble This Digg This Add To Del.icio.us Add To Reddit Add To Yahoo Add To Twitter


Written by ZeeShaN

ZeeShaN RasooL is a web developer who loves to work in latest technologies to create more interactive dynamic and beautiful web pages.







Enter your Email:

Click Here for Popular

Who I Am

Zeeshan Rasool

Software Engineer - PHP
Lahore - Pakistan

zeeshan(@)99points.info
Skype: zeeshan-rasool
gTalk: zishan.rasool85

Categories

Tags

99points adobe AJAX ajax pagination ajax rating ajax tutorial ajax voting system captcha Codeigniter codeigniter 2.0 codeigniter recaptcha CSS css tutorials dreamweaver cs5 Facebook facebox farmville ffmpeg flv google api hacking Joomla JQuery JQuery Gallery JQuery menus Jquery tutorial mafia war Mootools MySQL pagination Payment PHP php curl recaptcha RSS Feed SEO simplepie socail networking ssl Tutorials Twitter wall script Web XSS youtube

Comments