为什么 ASP.Net MVC 客户端验证不触发输入位于表单元素外部但通过 form="formid" 属性链接的情况？

Question

我正在使用 ASP.Net 8.0 MVC... ScenarioName 属性在模型中有一个必需的属性。 当我使用以下内容时，单击提交按钮并将所有这些元素都包含在表单标记内可以按预期工作！ 含义是在发布到服务器之前触发客户端验证并显示所需的验证消息。

<form id="addEditForm" asp-action="ScenarioDetailsAddEdit" asp-route-id="@Model.Scenario.ScenarioId">
  <input form="addEditForm" form="addEditForm" asp-for="ScenarioVersion.ScenarioName" class="form-control body-text element-border" />
  <span asp-validation-for="ScenarioVersion.ScenarioName" class="body-text-error"></span>
  <input form="addEditForm" class="rounded-button button-text" style="width: 100%;" type="submit" value="Save" />
</form>

但是当我有一个空表单标签并依赖表单属性来关联输入时，帖子工作正常并且服务器端验证完成了它的工作，但不再触发客户端验证。

<div>
<form id="addEditForm" asp-action="ScenarioDetailsAddEdit" asp-route-id="@Model.Scenario.ScenarioId">
</form>
<form id="deleteForm" asp-action="ScenarioDetailsDelete" asp-route-id="@Model.Scenario.ScenarioId">
</form>
</div>
<div>
  <input form="addEditForm" form="addEditForm" asp-for="ScenarioVersion.ScenarioName" class="form-control body-text element-border" />
  <span asp-validation-for="ScenarioVersion.ScenarioName" class="body-text-error"></span>
  <!-- Much detail missing for brevity -->
  <input form="deleteForm" class="rounded-button button-text" style="width: 100%;" type="submit" value="Delete" />
  <!-- Much detail missing for brevity -->
  <input form="addEditForm" class="rounded-button button-text" style="width: 100%;" type="submit" value="Save" />
</div>

我的问题是为什么会出现这种情况，具体是哪个客户端代码造成的？而且，除了确保所有输入都在表单标签内之外，最好的解决方案是什么？

对于其他背景，我使用导致问题的方法的原因是因为我在 HTML 中有多个表单（无法嵌套），但具有其他表单的输入，这些表单必须与原始表单输入一起内联显示。

例如我有一个删除表单，删除按钮输入和其他删除表单输入必须出现在属于原始表单的输入旁边。

Answer 1

在表单标签下添加以下代码行

HtmlHelper.UnobtrusiveJavaScriptEnabled = false;

此属性将禁用服务器端验证并首先激活客户端验证。