html5的input的required使用中遇到的问题及解决方法


Posted in HTML / CSS onApril 24, 2018

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无法关注该控件,因为它是隐藏的,因此表单不会提交。

解决方法如下

1.隐藏时,将required属性删除

selector.removeAttribute("required")

2.没有使用required的话,或许是由于button按钮,类型未设置造成。设置<button type="button">

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

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

5.禁用此表单控件。 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.
});

总结

以上所述是小编给大家介绍的h5的input的required使用中遇到的问题及解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
css3 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
Apr 26 HTML / CSS
html5理解head_动力节点Java学院整理
Jul 13 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
Mar 10 HTML / CSS
HTML5中的websocket实现直播功能
May 21 HTML / CSS
HTML5 body设置自适应全屏
May 07 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
Aug 19 HTML / CSS
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
Apr 22 HTML / CSS
css display table 自适应高度、宽度问题的解决
May 07 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 #HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 #HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 #HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
Apr 19 #HTML / CSS
HTML5实现移动端复制功能
Apr 19 #HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 #HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 #HTML / CSS
You might like
用PHP的ob_start();控制您的浏览器cache!
2006/11/25 PHP
mysql时区问题
2008/03/26 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
Python splitlines使用技巧
2008/09/06 Python
Python实现从url中提取域名的几种方法
2014/09/26 Python
python脚本内运行linux命令的方法
2015/07/02 Python
Python File readlines() 使用方法
2018/03/19 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
详解Python循环作用域与闭包
2019/03/21 Python
python根据时间获取周数代码实例
2019/09/30 Python
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
学年末自我鉴定
2014/01/21 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
交通事故起诉书
2015/05/19 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
python Polars库的使用简介
2021/04/21 Python
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS