Membuat Validasi Login effect Jquery

Download      |     Demo

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

Sumber dari http://www.99points.info