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. 实测总结 挂载远程文件夹方案 smb ftp sftp nfs webdav

    挂载远程文件夹的方法有: 1.smb 2.ftp 3.sftp 4.nfs 5.webdav 1.smb windows局域网使用的协议,windows网上邻居发现的共享文件夹即使用的smb协议,可以 ...

  2. Python 類別 class 的繼承 Inheritance

    既然 Python 是面向物件 Object Oriented 語言,它就有類別 Class 與物件 Object 的概念. 甚麼是類別 class ? 簡單講: 類別好比蓋房子的施工藍圖 Blue ...

  3. list 列表常用方法

    append(self, p_object)                    在列表末端追加一个新元素 insert(self, index, p_object)             在某个 ...

  4. python学习之路(3)---列表

    列表定义: 列表就是一个数据的集合,列表是可以重复的,可以对存储的数据进行增删改查, 列表的写法: list_name = ['ljwang','wangwu'] 列表的嵌套 a = ['1',['2 ...

  5. Python 列表深浅复制详解

    在文章<Python 数据类型>里边介绍了列表的用法,其中列表有个 copy() 方法,意思是复制一个相同的列表.例如 names = ["小明", "小红& ...

  6. Python变量类型说明

    Python中的变量不需要声明,直接赋值便是声明和定义的过程 每个变量在内存中创建,都包括变量的标识.名称和数据这些信息 每个变量在使用前必须赋值 counter = 100 #正数变量 miles ...

  7. tesseract4.0:win10 +x64+vs2015 源码安装(ViewerDebugging)安装记录

    参考文章: https://blog.csdn.net/u013985291/article/details/78295789 https://blog.csdn.net/u013985291/art ...

  8. 熔断监控Turbine

    step1:修改hosts的ip地址映射,创建eureka集群 可参考:https://www.cnblogs.com/noneplus/p/11374883.html step2:创建服务提供者 p ...

  9. evevt

    EventEvent 是一个事件对象,当一个事件发生后,和当前事件发生相关的详细信息会被临时存储到一个指定的地方,也就是event对象,以方便我们在需要的时候调用. 在这一点上,非常类似于飞机当中的黑 ...

  10. 一个手写的Vue放大镜,复制即可使用

    一个手写的vue放大镜 组件使用less,请确保已安装loader 本组件为放大镜组件,传参列表为: width: 必传,设置放大镜的宽高(正方形),放大区域等同,放大倍数为2倍 picList:必传 ...