没有合适的资源?快使用搜索试试~ 我知道了~
首页html5的input的required使用中遇到的问题及解决方法
资源详情
资源评论
资源推荐
html5的的input的的required使用中遇到的问题及解决方法使用中遇到的问题及解决方法
主要介绍了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无法关注该控件,因为它是隐藏的,因此表单不会提交。
解决方法如下解决方法如下
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使用中遇到的问题及解决方法,希望对大家有所帮助,如果大家有任何疑问
请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
weixin_38625708
- 粉丝: 4
- 资源: 945
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- RTL8188FU-Linux-v5.7.4.2-36687.20200602.tar(20765).gz
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
- SPC统计方法基础知识.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0