处理项目错误提示时候发现不一致,有的是按自己的代码正常显示,有的是显示个下面这样的提示,请填写此字段。
全局搜索"请填写此字段"没找到,按理应该是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:
参考: