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

216 阅读 0 评论 143 点赞

我是靠谱客的博主冷酷鼠标，这篇文章主要介绍简单实用的反馈表单无刷新提交带验证，现在分享给大家，希望可以做个参考。

js文件可以查看源码

XML/HTML Code

复制代码代码如下:

复制代码

 
<div id="preview"></div> 
<div id="formbox"> 
<form name="form" id="form" action="submit.php" method="post"> 
<ul id="ngothastyle3" > 
<li> 
<label>Name</label> 
<input type="text" name="name" class="" maxlength="40" /> 
</li> 
<li> 
<label>Email</label> 
<input type="text" name="email" class="" maxlength="100" /> 
</li> 
<li> 
<label>Message</label> 
<textarea name="message" rows="5" cols="45" class=""></textarea> 
</li> 
<li> 
<label> </label> 
<input type="submit" value="Submit"> 
</li> 
</ul> 
</form> 
</div> 

JavaScript Code

复制代码代码如下:

复制代码

 
<script type="text/javascript"> 
$('document').ready(function(){ 

$('#form').validate({ 
rules:{ 
"name":{ 
required:true, 
maxlength:40 
}, 

"email":{ 
required:true, 
email:true, 
maxlength:100 
}, 

"message":{ 
required:true 
}}, 

messages:{ 
"name":{ 
required:"This field is required" 
}, 

"email":{ 
required:"This field is required", 
email:"Please enter a valid email address" 
}, 

"message":{ 
required:"This field is required" 
}}, 

submitHandler: function(form){ 
$(form).ajaxSubmit({ 
target: '#preview', 
success: function() { 
$('#formbox').slideUp('fast'); 
} 
}); 

} 

}) 

}); 
</script> 