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配合使用的更多相关文章

  1. jQuery html5Validate基于HTML5表单验证插件

    更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...

  2. 第一百八十六节,jQuery,验证表单插件,Ajax 表单插件,验证和提交表单

    jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...

  3. Form表单利用Jquery Validate验证以及ajax提交

    #表单利用Jquery验证验证以及ajax提交 概述>详细讲解表单利用Jquery >验证验证以及ajax提交的过程,以及Validate的自定义提示语,非空判断,输入字段的远程ajax验 ...

  4. Ideal Forms – 帮助你建立响应式 HTML5 表单

    Ideal Forms 是建立和验证响应式 HTML5 表单的终极框架.它刚刚发布 V3 版本,更小,更快,更具可扩展性.它支持实时验证,完全自适应(适应容器,没有 CSS 媒体查询需要),键盘支持, ...

  5. 15 款优化表单的 jQuery 插件

    网页上的表单提供给用户的一种交互的方式,用户输入数据,提交到服务器,等待后续的处理.这些表单在我们浏览的网页中随处可见,也容易被我们忽略. 比如,“联系我们”页面会提供一个表单给用户填写他们的信息和想 ...

  6. 使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html

    使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...

  7. 实现跨浏览器html5表单验证

    div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...

  8. html5 表单样式 表单验证1 2 3

    html5 表单样式 ie9以下不支持 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  9. Form表单提交,Ajax请求,$http请求的区别

    做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...

随机推荐

  1. 页面性能监控之performance

    页面性能监测之performance author: @TiffanysBear 最近,需要对业务上的一些性能做一些优化,比如降低首屏时间.减少核心按钮可操作时间等的一些操作:在这之前,需要建立的就是 ...

  2. netty源码解解析(4.0)-17 ChannelHandler: IdleStateHandler实现

    io.netty.handler.timeout.IdleStateHandler功能是监测Channel上read, write或者这两者的空闲状态.当Channel超过了指定的空闲时间时,这个Ha ...

  3. cs231n---语义分割 物体定位 物体检测 物体分割

    1 语义分割 语义分割是对图像中每个像素作分类,不区分物体,只关心像素.如下: (1)完全的卷积网络架构 处理语义分割问题可以使用下面的模型: 其中我们经过多个卷积层处理,最终输出体的维度是C*H*W ...

  4. 日志文件写入失败(permission denied)

    用过Laravel的小伙伴一开始安装完框架后可能都遇到过daily 日志文件写入失败的问题,接下来我们就来详细说下日志文件写入失败的原因以及对应的解决方案. 在讲这个问题之前可能需要简单介绍下Linu ...

  5. 卷积神经网络cnn的实现

    卷积神经网络 代码:https://github.com/TimVerion/cat 卷积层 卷积层:通过在原始图像上平移来提取特征,每一个特征就是一个特征映射 原理:基于人脑的图片识别过程,我们可以 ...

  6. python学习之路(2)---字符编码

    二进制编码 bin(300)    python计算二进制编码,十进制转2进制 一个二进制位就是1bit 1bit代表了8个字节,00001111 1bit  = 1bytes   缩写1b 1kb ...

  7. 交叉编译QT 5.6.2 Shell脚本

    测试环境:  CPU: AT91SAM9X35      Linux: Atmel提供的linux-at91-linux4sam_5.3 (Linux-4.1.0) 转载请注明: 凌云物网智科嵌入式实 ...

  8. jmeter+WebDriver:启动浏览器进行web自动化

    无论是web自动化还是手机app自动化,WebDriver是Selenium的核心模块,jmeter WebDriver 仅支持Firefox.Chrome 和 HTML Unit驱动,暂不支持IE  ...

  9. ASP.NET Core Web API

    1.简单介绍 ASP.NET Core Web API 是 ASP.NET Core MVC 的一个功能.ASP.NET Core MVC 包含了对 Web API 的支持.可以构建多种客户端的 HT ...

  10. Comupter Tools 清单------包含但不限于此