form提交时隐藏input发生的错误

问题描述

  • 在form表单提交的时候,有些input标签被隐藏,表单验证过程中会出现An invalid form control with name='' is not focusable 的错误

  • 虽然我遇到的问题是我的input标签根本没有required属性,但是在该标签隐藏之前,(我的是使用tab栏切换)我输入了错误的格式,再隐藏,这时候他其实是错误的,会被form表单同样去验证,但是由于它被隐藏,浏览器获取不到焦点就会报错。

解决方法

  • 隐藏之前将该input的value值设置为空即可.我的input上面没有使用required属性。

如果input含有display:nonerequired属性,也会产生该错误

  • 产生原因

Chrome希望专注于需要但仍为空的控件,以便可以弹出消息“请填写此字段”。但是,如果控件在Chrome想要弹出消息的时候隐藏,即在提交表单时,Chrome无法关注该控件,因为它是隐藏的,因此表单不会提交。

  • 解决方法如下
  1. 隐藏时,将required属性删除
selector.removeAttribute("required")
  1. 没有使用required的话,或许是由于button按钮,类型未设置造成。设置<button type="button">

  2. form表单不验证,即添加novalidate属性。(不是最终解决办法)<form novalidate></form>

  3. 既然是由于使用了display:none造成,同样的visibility: hidden 也会造成问题,那就不使用。通过可以设置css样式opacity: 0;

  4. 禁用此表单控件。 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

https://stackoverflow.com/questions/30644606/an-invalid-form-control-with-name-is-not-focusable-without-any-required-or-h

h5的input的required使用中遇到的问题的更多相关文章

  1. h5中input的request属性提示文字字段

    <input type="password" class="form-control" name="passWord" require ...

  2. H5页面input输入框含有键盘自带的表情符时显示异常

    在做一个关于新闻的评论功能的H5页面时,需求里面要求能够发送表情显示表情,如果使用自定义的表情库,则在评论也还要加载大量的表情符图片,极大的影响加载速度,消耗流量,去看了下别的新闻网页版的评论部分也没 ...

  3. 移动端H5页面 input 获取焦点时,虚拟键盘挡住input输入框解决方法

    在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框.这会很影响用户体验,于是在网上找到了如下的解决办法: 方法一:使用w ...

  4. 08 H5新增input元素

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. H5新增input表单、表单属性

    新增表单 email,Email类型 url , Url类型 date,日期类型 time,时间类型 month,月类型 week,周类型 number,数字类型 tel,电话类型 search,搜索 ...

  6. amazeUI表单提交验证--input框required

    效果: html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  7. H5 限制input只能输入数字

    <input type="tel" /> 参考: http://blog.csdn.net/kongjiea/article/details/40185951

  8. H5中 input消除默认,取消在手机上的点击高亮效果

    input消除默认,代码如下    input{             -webkit-tap-highlight-color: rgba(255, 255, 255, 0);            ...

  9. 关于H5中 input消除默认,取消在手机上的点击高亮效果

    input消除默认,代码如下    input{             -webkit-tap-highlight-color: rgba(255, 255, 255, 0);            ...

随机推荐

  1. php的借用其他网站的页面覆盖Logo的技巧

    php的借用其他网站的页面覆盖Logo的技巧, <body> <div id="red_f"></div> <div class=&quo ...

  2. 第二章 初识JSP

    第二章   初识JSP 一.JSP简述 1.是JSP JSP是指在HTML中嵌入Java脚本语言.全称(Java Server Pages) 当用户通过浏览器访问Web应用时,使用JSP容器对请求的J ...

  3. Python内置函数(18)——bin

    英文文档: bin(x) Convert an integer number to a binary string. The result is a valid Python expression. ...

  4. SpringMVC(十二):SpringMVC 处理输出模型数据之@ModelAttribute

    Spring MVC提供了以下几种途径输出模型数据:1)ModelAndView:处理方法返回值类型为ModelAndView时,方法体即可通过该对象添加模型数据:2)Map及Model:处理方法入参 ...

  5. @OnetoOne @OnetoMany @ManyToOne(2)

    在班主任(id,name,bjid) 班级(id name) 学生(id name bjid)的 关系中 班主任一对一关联班级 班级一对多关联学生 @OnetoOne @joinColumn(bjid ...

  6. .Net Core 学习之路-基础

    .Net Core出来好久了,一直在了解,但始终没有应用到实际项目中.... 准备用.net core搞个SSO,才发现它和.net framework的变化并不是一点点... .net core还在 ...

  7. localStorage学习总结

    一.本地存储 在HTML5诞生之前,网站如果想在浏览器端存储数据,只能使用Cookie,使用Cookie有较多的限制. Cookie问题: 1.cookie大小限制在4K左右(各个浏览器不一致) 2. ...

  8. 实验吧_Guess Next Session&Once More(代码审计)

    Guess Next Session 看题目提示,是一道代码审计: <?php session_start(); if (isset ($_GET['password'])) { if ($_G ...

  9. 【实验吧】CTF_Web_登录一下好吗?

    实验吧CTF---Web篇 1. 打开登录地址(http://ctf5.shiyanbar.com/web/wonderkun/web/index.html),发现为一个登录界面,第一想到的是查看源代 ...

  10. [NOI 2009]变换序列

    Description 题库链接 对于 \(N\) 个整数 \(0, 1, \cdots, N-1\) ,一个变换序列 \(T\) 可以将 \(i\) 变成 \(T_i\) ,其中 \(T_i \in ...