浏览器提示:"请填写此字段",表单novalidate属性。

处理项目错误提示时候发现不一致,有的是按自己的代码正常显示,有的是显示个下面这样的提示,请填写此字段。

全局搜索"请填写此字段"没找到,按理应该是js控制的,然后又猜测是哪个第三方库实现的,基本排除了后还是不对,才想到是不是浏览器自带提示,换了个Firefox后果然跟chrome不一样,总算是找到原因了。

就是浏览器对表单字段的验证。如果input有required属性,提交表单是如果字段为空chrome浏览器就会自动提示"请填写此字段",

想要去掉这个提示给表单加一个novalidate属性就行了,禁止验证。

菜鸟教程上不知道是写错了还是没更新,说是不支持Safari,实际是支持的。

引用w3schools截图:

简单的示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<!--加novalidate属性,禁用浏览器对表单字段的验证-->
<form method="post"  id="form_id1"  novalidate>
<!--    第一种required写法-->
    <input class="form-control" id="id1" type="text" name="name1" placeholder="项目名称1" required="required">
    <button  type="submit">保存</button>

</form>

<!--不加novalidate属性,表单会提示-->
<form method="post"  id="form_id2" >
<!--    第二种required写法-->
    <input class="form-control" id="id_name2" type="text" name="name2" placeholder="项目名称2" required>
    <button  type="submit">保存</button>

</form>

</body>
</html>

不同的浏览器的提示样式:

chrome:

Safari:

Firefox:

ie:

 

 

参考:

https://www.w3schools.com/tags/att_form_novalidate.asp

https://www.runoob.com/tags/att-form-novalidate.html

  • 5
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值