简单的反馈表单无刷新提交带验证

js文件可以查看源码

演示

 

 

XML/HTML Code

1. <div id="preview"></div>  
2.         <div id="formbox">   
3.             <form name="form" id="form" action="submit.php" method="post">  
4.                 <ul id="ngothastyle3" >  
5.                     <li>  
6.                         <label>Name</label>  
7.                         <input type="text" name="name" class="" maxlength="40" />  
8.                     </li>  
9.                     <li>  
10.                         <label>Email</label>  
11.                         <input type="text" name="email" class="" maxlength="100" />  
12.                     </li>  
13.                     <li>  
14.                         <label>Message</label>  
15.                         <textarea name="message" rows="5" cols="45" class=""></textarea>  
16.                     </li>  
17.                     <li>  
18.                         <label> </label>  
19.                         <input type="submit" value="Submit">  
20.                     </li>  
21.                 </ul>  
22.             </form>             
23.  </div>   

 

JavaScript Code

1. <script type="text/javascript">  
2.             $('document').ready(function(){  
3.   
4.             $('#form').validate({  
5.                     rules:{  
6.                         "name":{  
7.                             required:true,  
8.                             maxlength:40  
9.                         },  
10.   
11.                         "email":{  
12.                             required:true,  
13.                             email:true,  
14.                             maxlength:100  
15.                         },  
16.   
17.                         "message":{  
18.                             required:true  
19.                         }},  
20.   
21.                     messages:{  
22.                         "name":{  
23.                             required:"This field is required"  
24.                         },  
25.   
26.                         "email":{  
27.                             required:"This field is required",  
28.                             email:"Please enter a valid email address"  
29.                         },  
30.   
31.                         "message":{  
32.                             required:"This field is required"  
33.                         }},  
34.   
35.                     submitHandler: function(form){  
36.                       $(form).ajaxSubmit({  
37.         target: '#preview',   
38.         success: function() {   
39.         $('#formbox').slideUp('fast');   
40.         }   
41.     });   
42.               
43.                     }  
44.                   
45.             })  
46.                           
47.         });  
48.         </script>   

 

原文地址:http://www.freejs.net/article_biaodan_87.html