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中的5个有趣的新技术
Apr 02 HTML / CSS
CSS3实现闪烁动画效果的方法
Feb 09 HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
解析HTML5中的新功能本地存储localStorage
Mar 01 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 HTML / CSS
分享CSS盒子模型隐藏的几种方式
Feb 28 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扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
python实现简单购物商城
2016/05/21 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
python文件特定行插入和替换实例详解
2017/07/12 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
Python的信号库Blinker用法详解
2020/12/31 Python
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
作风建设整改方案
2014/10/27 职场文书
2014年后备干部工作总结
2014/12/08 职场文书