html5表单与Jquery Ajax结合使用

html5的表单控件提供了很多格式检测功能，可以省去很多烦人的javascript验证代码，例如pattern属性和require属性。

问题：

一般表单的提交用的都是用button然后用ajax来提交，但是用button就不能触发HTML5的自带表单验证，用submit的话就又会直接提交表单

解决办法：

就是依然使用 input submit作为提交按钮，但在表单的提交事件里阻止进一步动作，转为ajax发送请求，这里贴出JQuery的代码：

<html>
<head><script type="text/javascript" src="jquery-1.9.0.min.js"></script>
</head>
<body><form action="" id='form'>username: <br><input type="text" name="username" value="" required="required"> <br>password: <br><input type="text" name="password" value="" required="required"> <br><br><input type="submit" value="Submit"></form><script type="text/javascript" language="javascript">$("#form").on("submit", function(ev) {$.ajax({......});//阻止submit表单提交ev.preventDefault();//或者return false//return false;});</script>
</body>
</html>

注意： H5自带的验证只是比较简单的验证，不是很完美，只适合做比较简单的验证，最好是用jQ的Validation插件或者其他表单验证插件。

还有就是form标签上的method属性会影响submit事件

html5表单与Jquery Ajax结合使用相关推荐

jQuery html5Validate基于HTML5表单验证插件
更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
bootstrap html5 表单验证,基于Bootstrap+jQuery.validate实现表单验证
这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤 ...
使用ajax提交form表单，包括ajax文件上传转http://www.cnblogs.com/zhuxiaojie/p/4783939.html...
使用ajax提交form表单,包括ajax文件上传前言使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){... },&quo ...
html5表单验证没有效果,HTML5表单验证特性(知识点小结)
前台提交信息到后台一般两种常见提交方式: Form表单提交和 Ajax无刷新页面提交 placeholder 不是所有的input都支持,比如input date就不支持解决方案: 可以在date ...
实现跨浏览器html5表单验证
html5表单添加了很多类型的表单,而且还自带验证的功能.在移动端,手机等设备能够根据不同的input类型弹出不同的键盘,例如iphone弹的键盘 <input type="email ...
Form表单插件jquery.form.js
jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax. jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubm ...
html5发光动态效果图,一款带有发光动画的HTML5表单
今天给大家秀一款带有发光动画的HTML5表单,挺酷的,效果图如下: 当表单获取焦点时,表单四周就会呈现出发光动画的效果,并不断地进行颜色渐变:当表单失去焦点时,停止发光.其中颜色渐变的动画只有基于we ...
form和ajax同时提交吗,form表单提交与ajax消息传递
form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...
html5表单属性自动获得焦点,HTML5里autofocus属性
转载:http://www.webhek.com/html5-autofocus/ HTML5给我们带来了一大堆神奇的东西.以前需要用JavaScript和Flash完成的任务,例如表单校验,INPU ...

html5表单与Jquery Ajax结合使用

html5表单与Jquery Ajax结合使用相关推荐

最新文章

热门文章