使用JavaScript提交表单，显示please wait消息不起作用

Question

. NET MVC应用程序，在一个表单提交事件，我想显示请等待消息时，点击提交按钮。

我还为必填字段添加了required属性。

所以我将代码修改如下:然后在提交前检查required字段是否填满。

但是当这种情况发生时，它不会显示请等待消息。

即使所有字段都填满了，它也会提交数据而不显示Please wait for消息。

这是我从网上得到的例子。https://weblogs.asp.net/psheriff/displaying-a-wait-message-on-an-mvc-page

这是我的自定义代码

<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");
};

Answer 1

最后我做了这个改变

let allAreFilled = true;
document.getElementById("my-form").querySelectorAll("[required]").forEach(function (i) {
if (!allAreFilled) return;
if (!i.value) {
allAreFilled = false;
return;
}
})
if (!allAreFilled) {
} else {
$(ctl).prop("disabled", true);
$(ctl).text(msg);
$(".submit-progress").removeClass("hidden");
$("body").addClass("submit-progress-bg");
document.getElementById("my-form").submit();
}