簡單實用的反饋表單無刷新提交帶驗證
更新時間: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>
相關文章
html中使用javascript調(diào)用本地程序(exe、doc等)實現(xiàn)代碼
調(diào)用本地程序(exe,doc等)使用html中的javascript實現(xiàn),不可思議吧,接下來為大家詳細介紹下,感興趣的朋友可以參考下哈2013-04-04Bootstrap與KnockoutJs相結合實現(xiàn)分頁效果實例詳解
KnockoutJS是一個JavaScript實現(xiàn)的MVVM框架。接下來通過本文給大家介紹Bootstrap與KnockoutJs相結合實現(xiàn)分頁效果,對bootstrap knockoutjs相關知識感興趣的朋友一起學習吧2016-05-05實現(xiàn)div內(nèi)部滾動條滾動到底部和頂部的代碼
下面筆者就為大家分享一篇實現(xiàn)div內(nèi)部滾動條滾動到底部和頂部的代碼,代碼簡潔,具有很好的參考價值,希望對大家有所幫助2017-11-11ElementUI 的 Tree 組件的基本使用實戰(zhàn)教程
這篇文章主要介紹了ElementUI 的 Tree 組件的基本使用實戰(zhàn)教程,本文結合示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-12-12JavaScript常用工具函數(shù)匯總(瀏覽器環(huán)境)
這篇文章主要匯總了JavaScript常用的工具函數(shù),幫助大家更好的理解和使用JavaScript,感興趣的朋友可以了解下2020-09-09用javascript實現(xiàn)分割提取頁面所需內(nèi)容
用javascript實現(xiàn)分割提取頁面所需內(nèi)容...2007-05-05使用JS批量選中功能實現(xiàn)更改數(shù)據(jù)庫中的status狀態(tài)值(批量展示)
我們在開發(fā)項目的時候經(jīng)常會在后臺管理時用到批量展示功能來動態(tài)的修改數(shù)據(jù)庫的值。下面以修改數(shù)據(jù)庫的status狀態(tài)值來實現(xiàn)批量展示功能2016-11-11