浏览器提示:"请填写此字段",表单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:

扫描二维码关注公众号,回复: 9417332 查看本文章

Safari:

Firefox:

ie:

参考:

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

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

发布了115 篇原创文章 · 获赞 34 · 访问量 9万+

猜你喜欢

转载自blog.csdn.net/u011519550/article/details/102532413
今日推荐