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

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>

(0)

相关推荐

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

    js文件可以查看源码 XML/HTML Code 复制代码 代码如下: <div id="preview"></div> <div id="formbox"> <form name="form" id="form" action="submit.php" method="post"> <ul id="ngothastyle3

  • 将form表单通过ajax实现无刷新提交的简单实例

    实例如下: //将form转换为AJAX提交 function ajaxSubmit(url,frm,fn){ var dataPara=getFormJson(frm); $.ajax({ url:url, type:"post", data:dataPara, async:false, dataType:'txt', success:fn }); } //将form中的值转换为键值对 function getFormJson(frm){ var o={}; var a=$(frm)

  • 告别AJAX实现无刷新提交表单

    通常对于无刷新提交表单,我们都是运用ajax实现的.前段时间跟着老大了解到另一种无刷新提交表单的方法.现在整理出来分享给大家. 第一种: (html页面) 复制代码 代码如下: <!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="utf-8">    <title>无刷新提交表单</title>    <style type

  • php HTML无刷新提交表单

    通常对于无刷新提交表单,我们都是运用ajax实现的.前段时间跟着老大了解到另一种无刷新提交表单的方法,是利用iframe框架实现的.现在整理出来分享给大家. 第一种: html页面 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="utf-8"> <title>无刷新提交表单</title> <style type=&quo

  • ajax(iframe)无刷新提交表单、上传文件

    找遍资料得出结果:不能 不过同时也找到了解决办法,就是用iframe的方式来提交表单,即实现无刷新提交表单又可以上传文件! 一.HTML代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http

  • jQuery实现form表单基于ajax无刷新提交方法详解

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

  • Jquery基于Ajax方法自定义无刷新提交表单Form实例

    本文实例讲述了Jquery基于Ajax方法自定义无刷新提交表单Form的方法.分享给大家供大家参考.具体实现方法如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法: 如Form代码如下: 复制代码 代码如下: <form id="Form1" action="action.aspx" method="pos

  • 发布三个ajax相关的函数,包括无刷新提交表单等

    几个月前,因为项目需求,我写了下面的三个ajax相关的函数.发布出来和大家分享.第一个是用来无刷新加载一段HTML第二个是把表单数据转换成一串请求字符串第三个是结合函数一和函数二的无刷新提交表单实现. 还有一点要提到的是,无刷新表单提交,还不能对文件上传进行处理,这个主要是因为浏览器的安全设置.目前无刷新的上传,一般是用iframe来实现的.关于这个,我们在google里搜索能找到很多. 网上虽然已经有很多优秀的ajax的类和函数了,但是或许我这几个函数对大家还有点用处,于是我就发布出来了.可以

  • ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单实例

    有时候,不得不考虑到以下场景问题: 数据库表字段会频繁更改扩展,而流行的重业务的js框架过于依赖json数据接口,导致的问题是,数据库表更改 -> 数据接口更改 -> 前段框架逻辑更改... 一不小心就陷入坑坑洼洼. 这样的话,原来纯ASP.NET MVC绑定的方式,还是可以一用的,因为该方式不用再为那么多js代码烦恼. 不好意思,前面自说自话啊,直接上干货代码了---- Ajax.BeginForm @{ Layout = null; var ajaxOptions = new AjaxOp

  • jQuery实现form表单基于ajax无刷新提交方法实例代码

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

随机推荐