javascript - 如果需要字段，请停止在表单提交上加载图像

Question

关于https://bm-translations.de/#kontakt我有一个带有提交按钮的表单，单击该按钮后，该按钮会替换为加载 gif。

问题是:如果未设置必填字段之一，则表单不会提交，但加载 gif 会出现并且不会消失。如何说仅在设置了所有必填字段后才出现？

这是 HTML:

<div id="formsubmitbutton">
<input type="submit" name="submitter" value="Submit Button" onclick="ButtonClicked()">
</div>
<div id="buttonreplacement" style="margin-left:30px; display:none;">
<img src="./bilder/preload.gif" alt="loading...">
</div>

这是 JS:

function ButtonClicked()
{
   document.getElementById("formsubmitbutton").style.display = "none"; // to undisplay
   document.getElementById("buttonreplacement").style.display = ""; // to display
   return true;
}
var FirstLoading = true;
function RestoreSubmitButton()
{
   if( FirstLoading )
   {
      FirstLoading = false;
      return;
   }
   document.getElementById("formsubmitbutton").style.display = ""; // to display
   document.getElementById("buttonreplacement").style.display = "none"; // to undisplay
}
// To disable restoring submit button, disable or delete next line.
document.onfocus = RestoreSubmitButton;

Answer 1

这里有一个解决方案 https://jsfiddle.net/z7wfj880/2/

ButtonClicked = function(){
   var validate = true;
   $('input:required').each(function(){
      if($(this).val().trim() === ''){
         validate = false;
      }
   });
   if(validate) { 
      document.getElementById("formsubmitbutton").style.display = "none"; // to undisplay
      document.getElementById("buttonreplacement").style.display = ""; // to display
      return true;
   }
}
var FirstLoading = true;
function RestoreSubmitButton()
{
   if( FirstLoading )
   {
      FirstLoading = false;
      return;
   }
   document.getElementById("formsubmitbutton").style.display = ""; // to display
   document.getElementById("buttonreplacement").style.display = "none"; // to undisplay
}
// To disable restoring submit button, disable or delete next line.
document.onfocus = RestoreSubmitButton;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="First Name" required/>
<input type="text" placeholder="Middle Name"/>
<input type="text" placeholder="Last Name" required/>

<div id="formsubmitbutton">
  <input type="submit" name="submitter" value="Submit Button" onclick="ButtonClicked()">
</div>
<div id="buttonreplacement" style="margin-left:30px; display:none;">
  <img src="./bilder/preload.gif" alt="loading...">
</div>

首先对必填 输入字段进行 trim ，这样如果任何用户提供空格，它将删除前面的多余空格&结束。

循环所有必需的输入并检查是否为空输入。