HTML required表单验证无警告提示问题排查求助

问题解决方案 #

• 缺少客户端验证依赖
  ASP.NET Core默认的前端验证依赖三个JS库，需要按顺序在页面底部引入：

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

如果没有引入这三个库，只有服务端验证逻辑的话，表单提交会被后端拦截返回错误，但前端不会自动展示提示。

• 被全局代码禁用了原生验证气泡
  很多前端UI模板会为了统一验证样式，全局给所有表单添加novalidate属性禁用浏览器自带的必填提示气泡，只保留阻止提交的逻辑，但如果没有配套实现自定义提示逻辑，就会出现你遇到的问题。
  你可以先在form标签上添加novalidate="false"属性测试：

<form class="text-left" asp-action="Register" method="post" novalidate="false">

如果修改后能弹出浏览器原生的必填提示，就说明是全局JS禁用了原生验证，你可以删掉对应的禁用逻辑，或者自己补充自定义验证提示的代码。

• 模型类未配置Required特性
  你需要确认绑定的User类的对应属性上已经添加了[Required]特性，并且配置了错误提示：

public class User
{
    [Required(ErrorMessage = "该字段为必填项")]
    public string UserName { get; set; }
    
    [Required(ErrorMessage = "该字段为必填项")]
    public string UserEMail { get; set; }
    
    [Required(ErrorMessage = "该字段为必填项")]
    public string UserPassword { get; set; }
}

• 验证提示被CSS隐藏
  把之前删除的<span asp-validation-for>标签加回来，打开浏览器开发者工具，选中对应span元素，检查是否存在display: none、opacity: 0或者父元素overflow: hidden这类样式导致提示被隐藏，如果有修改对应CSS规则即可。

内容的提问来源于stack exchange，提问作者BerkGarip