jQueryベースのフォームコミット検証

htmlフォームコード:

 
  
    
 
  
        
 
  
              ： 
  
            
  
        
 
  
        
 
  
              ： 
  
             
  
        
 
  
        
 
  
                ： 
  
             
  
        
 
  
        
 
  
             
  
             
  
        
 
  
    
  
  
 
 

jQueryコード:

 
  
           $(function(){ 
  
             $("form :input.required").each(function(){ 
  
                 var $required = $("*"); 
  
                 //$(this).parent().append($required);  //       
  
                 $(this).parent().prepend($required); 
  
             }); 
  
             $('form :input').blur(function(){ 
  
                 var $parent = $(this).parent(); 
  
                 if($(this).is('#username')){ 
  
                    if(this.value==""||this.value.length<6){ 
  
                       var errorMsg = '     6     '; 
  
                       $parent.append(''+errorMsg+''); 
  
                    }else{ 
  
                        var okMsg = '    '; 
  
                        $parent.append(''+okMsg+''); 
  
                    } 
  
                 } 
  
                 if($(this).is('#email')){ 
  
                     if(this.value==""||(this.value!="" &&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){ 
  
                         var errorMsg = '      E-mail  '; 
  
                         $parent.append(''+errorMsg+''); 
  
                     }else{ 
  
                         var okMsg = '    '; 
  
                         $parent.append(''+okMsg+''); 
  
                     } 
  
                 } 
  
             }); 
  
             $("form :input").focus(function(){ 
  
                 var $parent = $(this).parent(); 
  
                 $parent.find(".formtips").remove(); 
  
             }); 
  
             $("#send").click(function(){ 
  
                var $parent = $(this).parent().parent(); 
  
                $parent.find(".formtips").remove(); 
  
                $("form .required:input").trigger('blur'); 
  
                var numError = $('form .onError').length; 
  
                if(numError){ 
  
                   return false; 
  
                } 
  
             }); 
  
             $("#res").click(function(){ 
  
                 var $parent = $(this).parent().parent(); 
  
                 $parent.find(".formtips").remove(); 
  
             }); 
  
         }); 
  
 
 

コードは簡単で分かりやすいので、仲間たちが直接持って行って使いましょう.ここでは詳しく説明しません.