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请求 以前一直搞不清楚什么时候应该用哪种 ...
随机推荐
- docker配置国内镜像地址
docker的官方镜像站被大天朝强了,今天发现阿里有镜像加速这个功能,目前好像是在公测中,废话不多说,接下来告诉你怎么操作. 点击进入阿里镜像库 https://cr.console.aliyun.c ...
- Flink Metrics 源码解析
Flink Metrics 有如下模块: Flink Metrics 源码解析 -- Flink-metrics-core Flink Metrics 源码解析 -- Flink-metrics-da ...
- ABAP:如何等待小数秒数
WAIT UP TO x SECONDS. 和CALL FUNCTION 'ENQUE_SLEEP'都只能支持整数的秒数(如果是非整数,则四舍五入),如果要WAIT非整数的描述,可以如下写法:
- nginx 使用HTTPS协议-SSL证书模块报错解决-附nginx安装 : [emerg] the "ssl" parameter requires ngx_http_ssl_module in nginx.c
Linux系统下ngnix使用HTTPS协议启动报错: nginx: [emerg] the "ssl" parameter requires ngx_http_ssl_modul ...
- sqoop与PG库导入导出数据
导入数据到Hive sqoop import --connect jdbc:postgresql://172.66.6.666/radar5g4h --username postgres --pass ...
- SpringCould-------使用Hystrix 实现断路器进行服务容错保护
消费: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.or ...
- ionic $ioniActionSheet 在安卓手机没样式
解决方法: 添加以下修复css样式 /** * Action Sheets for Android * ------------------------------------------------ ...
- python大纲+变量基础详解
1.python的历史 python2和python3的区别 2004 Django框架的诞生 2.python是编程语言 python 是解释型语言 3.python的种类 cpyt ...
- js 调用手机摄像头或相册并展示图片
效果图 手机浏览器.微信打开该网页,都支持调用摄像头拍照和打开相册. 先看最终结果: 每次点击“点击上传”,可以选择相册或者拍照,选完以后可以多展示一张图片,同时上传服务器. 点击“重新上传”,清空所 ...
- Python--函数参数类型、用法及代码示例
在编程语言里,将一个个功能定义成函数,能够进行反复调用,而不是每次都重复相同的代码,这种方式能够大幅度降低代码的复杂度. 函数的好处: 1.代码重用 2.保持一致性 3.可扩展性 1.基础 我们定义函 ...