ASP.NET Core MVC模态框创建时如何触发客户端验证错误提示

问题根源 #

当使用包含嵌套实体的KoiViewModel时，表单字段的name属性会自动带上前缀（比如Koi.Name），而jQuery Unobtrusive Validation默认可能无法正确关联对应的错误提示元素，或者动态加载的模态框未重新解析验证规则。

具体解决步骤 #

• 确保错误提示元素与字段正确绑定
  在视图中使用asp-validation-for辅助标签时，必须匹配嵌套属性的完整路径：

  <div class="form-group">
      <label asp-for="Koi.Name" class="control-label"></label>
      <input asp-for="Koi.Name" class="form-control" />
      <span asp-validation-for="Koi.Name" class="text-danger"></span>
  </div>
  

  渲染后检查span元素的data-valmsg-for属性，确认其值为Koi.Name，与输入框的name属性完全一致。

• 模态框显示后重新初始化验证
  如果模态框是动态加载（比如通过AJAX或隐藏后再次显示），需要在模态框显示完成后重新解析验证规则，确保Unobtrusive Validation识别最新的表单结构：

  $('#createKoiModal').on('shown.bs.modal', function () {
      var $form = $(this).find('form');
      // 清除旧的验证缓存
      $form.removeData('validator').removeData('unobtrusiveValidation');
      // 重新解析表单验证规则
      $.validator.unobtrusive.parse($form);
  });
  

• 检查表单的命名空间完整性
  确保所有嵌套属性的输入框都由asp-for生成，避免手动编写name属性，防止前缀错误。比如不要手动写name="Name"，必须使用asp-for="Koi.Name"来生成正确的命名前缀。

• 确认脚本加载顺序
  确保_ValidationScriptsPartial中的脚本（jQuery、jQuery Validate、jQuery Unobtrusive Validate）在模态框的HTML之后加载，或者在文档就绪事件之后执行验证初始化逻辑。如果是布局页中加载脚本，需保证模态框内容加载完成后再触发验证解析。

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