使用JavaScript验证表单时清空文本域提交无提示且页面刷新问题

1. 重复ID违反HTML规范 #

所有textarea使用了相同的id="mytextarea"，ID必须页面唯一。浏览器对重复ID的元素处理可能出现异常，导致验证逻辑无法正确读取textarea的值，直接跳过验证提交表单。

修复：删除手动设置的重复ID，asp-for会自动生成唯一ID，不影响功能；也可以给每个textarea设置唯一ID（如id="nameTextarea"），但无需手动ID也能正常验证。

2. 缺少CSRF令牌导致后端拦截 #

ASP.NET Core的POST表单默认要求CSRF验证，未包含令牌时，后端会直接拦截请求，表现为页面刷新但验证逻辑未触发。另外，ID参数丢失是因为未将参数包含在表单内或通过路由传递。

修复：

• 给表单添加asp-antiforgery="true"属性，或在表单内插入@Html.AntiForgeryToken()，确保CSRF验证通过。
• 传递ID参数：添加隐藏字段<input type="hidden" asp-for="ModelExample.Id" />，或给表单添加asp-route-id="@Model.ModelExample.Id"属性绑定路由参数。

3. 内联事件绑定的潜在问题 #

内联onsubmit可能因上下文问题导致验证函数未正确执行，改用事件监听更可靠。

优化后的JS代码：

document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('MyForm');
  form.addEventListener('submit', function(event) {
    let allFilled = true;
    const textAreas = form.querySelectorAll('textarea');
    
    textAreas.forEach(textarea => {
      if (textarea.value.trim() === "") {
        allFilled = false;
      }
    });

    if (!allFilled) {
      alert("所有输入框都必须填写。");
      event.preventDefault();
      return false;
    }
  });
});

同时删除表单标签中的onsubmit="return validateForm(event)"属性。

修正后的表单示例 #

<form id="MyForm" method="post" asp-page-handler="C#MethodForSaving" asp-antiforgery="true" asp-route-id="@Model.ModelExample.Id">
  <!-- 隐藏字段传递ID -->
  <input type="hidden" asp-for="ModelExample.Id" />
  
  <div class="form-group">
    <label asp-for="ModelExample.Name"></label>
    <textarea class="form-control" asp-for="ModelExample.Name" rows="10" placeholder="Enter Name"></textarea>
  </div>
  <div class="form-group">
    <label asp-for="ModelExample.Name2"></label>
    <textarea class="form-control" asp-for="ModelExample.Name2" rows="10" placeholder="Enter Name"></textarea>
  </div>
  <div class="form-group">
    <label asp-for="ModelExample.Name3"></label>
    <textarea class="form-control" asp-for="ModelExample.Name3" rows="10" placeholder="Enter Name"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Save</button>
</form>

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