html5表单与Jquery Ajax配合使用
html5的表单控件提供了很多格式检测功能,可以省去很多烦人的javascript验证代码,例如pattern属性和require属性,但触发的条件是表单提交,如果想通过ajax提交表单,就出现了不能触发验证的问题。
解决办法就是依然使用 input submit作为提交按钮,但在表单的提交事件里阻止进一步动作,转为ajax发送请求,这里贴出JQuery的代码:
<script language="javascript">
$(document).ready(function(){
$("#form").submit(function(e){
e.preventDefault();
/*-----Ajax省略-------*/
})
})
</script> <form action="..." id="form">
<input type="text" required />
<input type="submit" value="提交" />
</form>
html5表单与Jquery Ajax配合使用的更多相关文章
- jQuery html5Validate基于HTML5表单验证插件
更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
- 第一百八十六节,jQuery,验证表单插件,Ajax 表单插件,验证和提交表单
jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...
- Form表单利用Jquery Validate验证以及ajax提交
#表单利用Jquery验证验证以及ajax提交 概述>详细讲解表单利用Jquery >验证验证以及ajax提交的过程,以及Validate的自定义提示语,非空判断,输入字段的远程ajax验 ...
- Ideal Forms – 帮助你建立响应式 HTML5 表单
Ideal Forms 是建立和验证响应式 HTML5 表单的终极框架.它刚刚发布 V3 版本,更小,更快,更具可扩展性.它支持实时验证,完全自适应(适应容器,没有 CSS 媒体查询需要),键盘支持, ...
- 15 款优化表单的 jQuery 插件
网页上的表单提供给用户的一种交互的方式,用户输入数据,提交到服务器,等待后续的处理.这些表单在我们浏览的网页中随处可见,也容易被我们忽略. 比如,“联系我们”页面会提供一个表单给用户填写他们的信息和想 ...
- 使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html
使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...
- 实现跨浏览器html5表单验证
div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...
- html5 表单样式 表单验证1 2 3
html5 表单样式 ie9以下不支持 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- Form表单提交,Ajax请求,$http请求的区别
做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...
随机推荐
- Linux--shell重定向与文件处理命令--02
一.IO重定向 1.数据输入:键盘---标准输入,但并不是唯一输入方式 ” | passwd –stdin username #同时添加用户和密码 while line;do 循环体...$line ...
- cs231n---循环神经网络
1 RNN介绍 (1)一对多,多对一,多对多的任务 传统的神经网络只能处理一对一的任务,而RNN可以处理一对多,多对一,多对多的任务: 其中,一些典型的应用如下: Image Captioning:i ...
- 域名、主机名、网站名以及 URL 基础概念
这个东西,在百度经验上已经有人讲得非常清楚了, 作为 web 方向的小白, 我写下我的理解,以便日后查看. 以 https:// www.3vjia.com 为例, 见下图: DNS (Domain ...
- EF获取DataTable的扩展方法GetDataSet
微软的EF至今已到了EF6版本了,但是,不知道微软咋想的,至今也不支持直接从数据库获取一张数据表DataTable,但这个DataTable在许多情况下还是比确定的实体化类更方便好使,这里,我仿照微软 ...
- jenkins增量更新及重启服务步骤
jenkins增量更新步骤:(以creditsys_service_tomcat为例) 1.SecureCRT 或者Xshell 连接服务器192.168.*.*,账号:test/**** 2.cd ...
- [HAOI2018]苹果树(组合数学,计数)
[HAOI2018]苹果树 cx巨巨给我的大火题. 感觉这题和上次考试gcz讲的那道有标号树的形态(不记顺序)计数问题很类似. 考虑如果对每个点对它算有贡献的其他点很麻烦,不知怎么下手.这个时候就想到 ...
- (springboot)自定义Starter
要引入的jar项目,即自定义的Starter项目: pom:(这里不能引入springboot整合否则测试项目注入失败) <?xml version="1.0" encodi ...
- F#周报2019年第34期
新闻 高效的F#,提示与技巧 Fable 社区资源 Visual Studio提示与技巧:为.NET增加生产力 无风险地尝试Compositional IT的培训包--如果没有增加任何价值,可以得到完 ...
- .netcore CAP2.6 快速入门
CAP介绍: CAP是一个用来解决微服务或者分布式系统中分布式事务问题的一个开源项目解决方案.可以解决跨服务器的数据一致性问题.一个简单的列子,如:订单系统创建订单后需要通知邮件通知用户下单成功,解决 ...
- Python 基础 2-3 列表的反转与排序
引言 列表是按照特定格式排序而成的,有时候这种排序方式我们并不喜欢,我们希望它可以按照我们的方式来进行正序或者倒序排序,或其他的排序方式 反转与排序 比如说我这里有一组列表,里面存放的全部都是数值,但 ...