簡單實用的反饋表單無刷新提交帶驗證
更新時間：2013年11月15日 16:30:18 作者：
表單無刷新提交帶驗證，非常適用于反饋，具體的實現(xiàn)如下包含各個功能代碼，喜歡的朋友可以參考下
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>
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>
相關文章
寫個播放器應付復習，因為Ajax涉及到跨域獲取天氣信息，有兩個版本，一個是直接跨域，IE10支持，其他的瀏覽器要改配置2013-05-05
這篇文章主要為大家詳細介紹了OpenLayers實現(xiàn)圖層切換控件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要為大家詳細介紹了Bootstrap按鈕下拉菜單組件，感興趣的小伙伴們可以參考一下2016-05-05
gulpjs是一個前端構建工具,gulpjs使用的是nodejs中stream來讀取和操作數(shù)據(jù)，其速度更快,有興趣的可以了解一下。2017-01-01
本文是對js中的onclick事件傳參進行了詳細的講解，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要給大家介紹了關于uni-app小程序分享功能實現(xiàn)方法的相關資料,uni-app中有分享的API接口,但是需要現(xiàn)在QQ或者微信等開發(fā)者平臺上注冊賬號,驗證公司信息,而且只能分享圖片或者文本等內容,需要的朋友可以參考下2023-07-07
textbox右鍵菜單...2006-10-10
這篇文章主要給大家介紹了關于如何利用JavaScript編寫一個格斗小游戲，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
網(wǎng)絡圖片延遲加載實現(xiàn)代碼 超越jquery控件
原理是分段加載圖片，主要用于大型網(wǎng)站節(jié)省帶寬，可是他們提供的東西壓縮混淆看不清，還有的要基于什么雅虎的什么庫，總之是很麻煩的，JQ的控件倒是夠清晰了，只是還是沒有達到節(jié)省網(wǎng)絡帶寬的效果2010-03-03
js實現(xiàn)的GridView即表頭固定表體有滾動條且可滾動
實現(xiàn)GridView，表頭固定，表體有滾動條且可滾動，下面有個不錯的示例，希望對大家有所幫助2014-02-02