h5的input的required使用中遇到的问题
form提交时隐藏input发生的错误
问题描述
在form表单提交的时候,有些input标签被隐藏,表单验证过程中会出现
An invalid form control with name='' is not focusable
的错误虽然我遇到的问题是我的input标签根本没有required属性,但是在该标签隐藏之前,(我的是使用tab栏切换)我输入了错误的格式,再隐藏,这时候他其实是错误的,会被form表单同样去验证,但是由于它被隐藏,浏览器获取不到焦点就会报错。
解决方法
- 隐藏之前将该input的value值设置为空即可.我的input上面没有使用required属性。
如果input含有display:none
和required
属性,也会产生该错误
- 产生原因
Chrome希望专注于需要但仍为空的控件,以便可以弹出消息“请填写此字段”。但是,如果控件在Chrome想要弹出消息的时候隐藏,即在提交表单时,Chrome无法关注该控件,因为它是隐藏的,因此表单不会提交。
- 解决方法如下
- 隐藏时,将required属性删除
selector.removeAttribute("required")
没有使用required的话,或许是由于button按钮,类型未设置造成。设置
<button type="button">
form表单不验证,即添加novalidate属性。(不是最终解决办法)
<form novalidate></form>
既然是由于使用了
display:none
造成,同样的visibility: hidden
也会造成问题,那就不使用。通过可以设置css样式opacity: 0;
禁用此表单控件。
disabled
这是因为通常如果你隐藏了表单控件,那是因为你不关心它的价值。所以这个表单控件名称值对在提交表单时不会被发送。
$("body").on("submit", ".myForm", function(evt) {
// Disable things that we don't want to validate.
$(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", true);
// If HTML5 Validation is available let it run. Otherwise prevent default.
if (this.el.checkValidity && !this.el.checkValidity()) {
// Re-enable things that we previously disabled.
$(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);
return true;
}
evt.preventDefault();
// Re-enable things that we previously disabled.
$(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);
// Whatever other form processing stuff goes here.
});
如有其他更好方法,欢迎留言!
参考
https://stackoverflow.com/questions/22148080/an-invalid-form-control-with-name-is-not-focusable
h5的input的required使用中遇到的问题的更多相关文章
- h5中input的request属性提示文字字段
<input type="password" class="form-control" name="passWord" require ...
- H5页面input输入框含有键盘自带的表情符时显示异常
在做一个关于新闻的评论功能的H5页面时,需求里面要求能够发送表情显示表情,如果使用自定义的表情库,则在评论也还要加载大量的表情符图片,极大的影响加载速度,消耗流量,去看了下别的新闻网页版的评论部分也没 ...
- 移动端H5页面 input 获取焦点时,虚拟键盘挡住input输入框解决方法
在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框.这会很影响用户体验,于是在网上找到了如下的解决办法: 方法一:使用w ...
- 08 H5新增input元素
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- H5新增input表单、表单属性
新增表单 email,Email类型 url , Url类型 date,日期类型 time,时间类型 month,月类型 week,周类型 number,数字类型 tel,电话类型 search,搜索 ...
- amazeUI表单提交验证--input框required
效果: html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- H5 限制input只能输入数字
<input type="tel" /> 参考: http://blog.csdn.net/kongjiea/article/details/40185951
- H5中 input消除默认,取消在手机上的点击高亮效果
input消除默认,代码如下 input{ -webkit-tap-highlight-color: rgba(255, 255, 255, 0); ...
- 关于H5中 input消除默认,取消在手机上的点击高亮效果
input消除默认,代码如下 input{ -webkit-tap-highlight-color: rgba(255, 255, 255, 0); ...
随机推荐
- php的借用其他网站的页面覆盖Logo的技巧
php的借用其他网站的页面覆盖Logo的技巧, <body> <div id="red_f"></div> <div class=&quo ...
- 第二章 初识JSP
第二章 初识JSP 一.JSP简述 1.是JSP JSP是指在HTML中嵌入Java脚本语言.全称(Java Server Pages) 当用户通过浏览器访问Web应用时,使用JSP容器对请求的J ...
- Python内置函数(18)——bin
英文文档: bin(x) Convert an integer number to a binary string. The result is a valid Python expression. ...
- SpringMVC(十二):SpringMVC 处理输出模型数据之@ModelAttribute
Spring MVC提供了以下几种途径输出模型数据:1)ModelAndView:处理方法返回值类型为ModelAndView时,方法体即可通过该对象添加模型数据:2)Map及Model:处理方法入参 ...
- @OnetoOne @OnetoMany @ManyToOne(2)
在班主任(id,name,bjid) 班级(id name) 学生(id name bjid)的 关系中 班主任一对一关联班级 班级一对多关联学生 @OnetoOne @joinColumn(bjid ...
- .Net Core 学习之路-基础
.Net Core出来好久了,一直在了解,但始终没有应用到实际项目中.... 准备用.net core搞个SSO,才发现它和.net framework的变化并不是一点点... .net core还在 ...
- localStorage学习总结
一.本地存储 在HTML5诞生之前,网站如果想在浏览器端存储数据,只能使用Cookie,使用Cookie有较多的限制. Cookie问题: 1.cookie大小限制在4K左右(各个浏览器不一致) 2. ...
- 实验吧_Guess Next Session&Once More(代码审计)
Guess Next Session 看题目提示,是一道代码审计: <?php session_start(); if (isset ($_GET['password'])) { if ($_G ...
- 【实验吧】CTF_Web_登录一下好吗?
实验吧CTF---Web篇 1. 打开登录地址(http://ctf5.shiyanbar.com/web/wonderkun/web/index.html),发现为一个登录界面,第一想到的是查看源代 ...
- [NOI 2009]变换序列
Description 题库链接 对于 \(N\) 个整数 \(0, 1, \cdots, N-1\) ,一个变换序列 \(T\) 可以将 \(i\) 变成 \(T_i\) ,其中 \(T_i \in ...