Implement form submission validation based on jQuery

HTML form code:

   <form method="post" action=""> 

       <div class="int"> 

          <label for="username"> User name: </label> 

          <input type="text" id="username" class="required"/> 

       </div> 

       <div class="int"> 

           <label for="username"> Email address: </label> 

           <input type="text" id="email" class="required"/> 

       </div> 

       <div class="int"> 

           <label for="username"> Personal information: </label> 

           <input type="text" id="personinfo"/> 

       </div> 

       <div class="sub"> 

           <input type="submit" value=" submit " id="send"/> 

           <input type="reset" id="res"/> 

       </div> 

   </form>  

JQuery code:

          $(function(){ 

            $("form :input.required").each(function(){ 

                var $required = $("<strong class='high'>*</strong>"); 

                //$(this).parent().append($required);  // Append to the document  

                $(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 = ' Please enter at least 6 Bit user name '; 

                      $parent.append('<span class="formtips onError">'+errorMsg+'</span>'); 

                   }else{ 

                       var okMsg = ' Input the correct '; 

                       $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>'); 

                   } 

                } 

                if($(this).is('#email')){ 

                    if(this.value==""||(this.value!=""&&!/.+@.+.[a-zA-Z]{2,4}$/.test(this.value))){ 

                        var errorMsg = ' Please enter the correct one E-mail address '; 

                        $parent.append('<span class="formtips onError">'+errorMsg+'</span>'); 

                    }else{ 

                        var okMsg = ' Input the correct '; 

                        $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>'); 

                    } 

                } 

            }); 

            $("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(); 

            }); 

        });

The code is very simple and easy to understand. Let's take it and use it.