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
Email
Password Minimum 5 characters
1 |
1 thought on “How To: Create jQuery Login Form with Animated validation Effect.”
Comments are closed.