ASP.NET MVC表单提交时「请等待」消息不显示问题求助

在ASP.NET MVC应用中，需求是点击提交按钮触发表单submit事件时显示「请等待」消息，同时已为必填字段添加required属性。目前修改代码后，表单会先校验必填字段，但无论字段是否填全，「请等待」消息都无法显示；即使所有字段填写完整，表单直接提交时也不显示该消息。

原始代码 #

HTML代码 #

<div class="col-md-2 col-md-10">
  <input type="submit" value="Register Customer" id="submitButton" class="btn btn-success" onclick="return DisplayProgressMessage();" />
</div>

JavaScript代码 #

function DisplayProgressMessage(ctl, msg) {
  //document.getElementById('submitButton').style.display = 'none',
  $('my-form').on('submit', CheckRequired);
  $(ctl).prop("disabled", true);
  $(ctl).text(msg);
  $(".submit-progress").removeClass("hidden");
  $("body").addClass("submit-progress-bg");
};

问题分析 #

• 参数传递缺失：点击按钮时调用DisplayProgressMessage()未传入ctl和msg参数，导致$(ctl)无法定位按钮，后续修改按钮状态、显示等待消息的逻辑全部失效。
• 表单选择器错误：$('my-form')是无效选择器，表单选择器应为$('#my-form')（若表单id为my-form）或$('form')，否则无法绑定submit事件。
• onclick返回值问题：DisplayProgressMessage未明确返回true，默认返回undefined会阻止表单提交，即使校验通过也无法触发后续逻辑。
• 事件顺序冲突：浏览器原生required校验在submit事件前触发，直接在按钮onclick中处理等待消息，会因校验不通过提前终止，导致消息无法显示。

修复方案 #

修正思路 #

• 绑定表单submit事件触发等待消息，确保仅在原生校验通过后执行逻辑。
• 正确获取按钮元素，避免参数传递错误。
• 禁用按钮防止重复提交，同时保证等待消息在表单提交前正常显示。

修正后的代码 #

HTML代码

<form id="my-form">
  <!-- 带required属性的表单字段 -->
  <div class="col-md-2 col-md-10">
    <input type="submit" value="Register Customer" id="submitButton" class="btn btn-success" />
  </div>
</form>
<!-- 等待消息容器 -->
<div class="submit-progress hidden">请等待...</div>

JavaScript代码

$(function() {
  // 监听表单submit事件
  $('#my-form').on('submit', function(e) {
    // 浏览器原生校验通过后执行逻辑
    if (this.checkValidity()) {
      const submitBtn = $('#submitButton');
      // 禁用按钮防止重复提交
      submitBtn.prop("disabled", true);
      submitBtn.text("提交中...");
      // 显示等待消息
      $(".submit-progress").removeClass("hidden");
      $("body").addClass("submit-progress-bg");
    }
  });
});

额外说明 #

• 确保submit-progress和submit-progress-bg类已定义对应CSS样式（如消息位置、背景遮罩等）。
• 若需自定义校验，可在this.checkValidity()后添加校验逻辑，通过后再执行等待消息代码。

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