首页>>表单>>简单的反馈表单无刷新提交带验证(2013-10-29)

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

 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