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

Written By: Zeeshan Rasool | Posted In: CSS, JQuery, PHP, Web Development

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

FORM


		
				Email          
				
		
		 
		

		
			Password 
			
			          Minimum 5 characters

If you enjoyed this post, please consider leaving a comment below or subscribing to the RSS feed to have future articles delivered to your feed reader. You can also follow us on Facebook or Twitter @99Points

Zeeshan Rasool is the founder and editor of this blog. Beside this, he is an experienced PHP web developer and freelancer. He loves to create best and interactive web apps. You can follow him at twitter @99_Points and facebook OR drop an email at 99points.info@gmail.com

17 to “How To: Create jQuery Login Form with Animated validation Effect.”

CSS Brigit | How To: Create jQuery Login Form with Animated validation Effect. May 22, 2010 at 3:11 pm
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. Demo is available…
150+ Fresh Useful Articles for Designers, Developers and Freelancers | tripwire magazine May 25, 2010 at 5:45 am
[...] How To: Create jQuery Login Form with Animated validation Effect. [...]
auu January 15, 2011 at 3:44 pm
good but link don’t data
shankar March 1, 2011 at 4:20 am
validation is fine but link not working please check out
Netgenerator March 23, 2011 at 6:15 am
Hey cool thing, especially including that small email validation function. Like that and will use it for my next project. Thanks!
16 Useful jQuery Form Validation Tutorials | ZoomZum October 10, 2011 at 9:54 am
[...] 12) jQuery Animated Form Validation [...]
Vinay November 23, 2011 at 5:32 am
Nice it were very helpful. You can get more jquery on betasofttrainings.com.
asidd February 2, 2012 at 12:37 am
this code is not working in IE
a February 4, 2012 at 11:54 am
test
mark April 25, 2012 at 9:34 pm
nice demo. to bad you did not take the time to make it down loadable, or even be able to get the posted code to work.
kalai May 8, 2012 at 1:08 am
good…………
san May 10, 2012 at 3:53 am
very nice
san May 14, 2012 at 11:35 am
xc
แจก 12 JQuery ฟอร์มล็อกอินสวยๆ | Mwebcode August 15, 2012 at 6:15 am
[...] มาถึงตัวนี้ จัดว่าอลังการที่สุดเลยเพราะเป็นการใช้ css3 animation เข้ามาช่วยเพิ่มลูกเล่นให้กล่องล็อกอิน เมื่อเราคลิกที่แท็ปด้านบน วัตถุต่างๆก็จะวิ่งมาประกอบเป็นกล่องล้อกอินทันทีสวยมากเลยครับ ดูตัวอย่าง ดาวน์โหลด [...]
test October 4, 2012 at 12:14 pm
test
jQuery For Web Design » 13 jQuery Form Validator Plugins December 23, 2012 at 10:14 am
[...] Create jQuery Login Form with Animated validation Effect [...]
hammad January 2, 2013 at 8:22 pm
I cant download