Javascript 在处理表单时显示gif图像

我正在开发一个SpringWeb应用程序，其中有一个登录页面，但我希望在处理表单时显示gif图像。请任何人都可以指导我通过最好的方式来实现这一点

这是我的HTML页面中包含javascript函数的部分

<div class="loginbox">
<img src = "images/login2.jpg" class="avatar" >
<form  id="myForm" action="login" method='POST' onsubmit="return validate();" >
<div th:if="${param.message != null}" class="alert alert-info" th:text="${param.message[0]}">message</div>
<div th:if="${param.error != null}" class="alert alert-danger" th:text="${session[SPRING_SECURITY_LAST_EXCEPTION]}">error</div>
<p>Username</p>
<input type="text" name="username" placeholder="Enter your Email">
<p> Password</p>
<input type="password" name="password" placeholder="Enter your password">
<div>
<input id="myBtn" type="submit" name="submit"  value="Login"> 
<img id="loadingImg" src="../images/loading.gif" style="display:none;" alt="LOADING PLEASE WAIT....">
</div>
</form>
</div>
 <script th:inline="javascript">
 function validate() {
    if (document.f.username.value == "" && document.f.password.value == "") {
        alert(/*[[#{message.username} + #{message.password}]]*/);
        document.f.username.focus();
        return false;
    }
    if (document.f.username.value == "") {
        alert(/*[[#{message.username}]]*/);
        document.f.username.focus();
        return false;
    }
    if (document.f.password.value == "") {
        alert(/*[[#{message.password}]]*/);
        document.f.password.focus();
        return false;
      }
   }
  </script>

但我知道它不能正常工作。我希望在表单提交期间显示gif图像，如果存在验证错误，则停止gif并显示错误。但是，gif图像应始终在身份验证后加载到重定向

最好的办法是什么

---

感谢您的帮助，谢谢

下面是一个使用jQuery的简单示例

$('#myForm').submit(function (event) {
  // prevent the default action of the form, i.e. submitting 
  event.preventDefault() 

  if (document.f.username.value == "" && document.f.password.value == "") {
      alert(/*[[#{message.username} + #{message.password}]]*/);
      document.f.username.focus();
      return false;
  }
  else if (document.f.username.value == "") {
      alert(/*[[#{message.username}]]*/);
      document.f.username.focus();
      return false;
  }
  else if (document.f.password.value == "") {
      alert(/*[[#{message.password}]]*/);
      document.f.password.focus();
      return false;
    }
  }
  else{
    // serialize your form data
    var formdata = $(this).serialize();
    // show image 
    $('#loadingImg').fadeIn();
    // run ajax request
    $.ajax({
        method: 'POST',
        type: 'POST', // if using jquery 1.9 or earlier
        data: formdata,
        url: 'your/form/action',
        success: function (data) {
           $('#loadingImg').fadeOut(); 
        }
    });
  }
});

---

在表单提交中，您只是验证加载微调器没有异步。如果发出API请求，则可以显示微调器，然后在完成时将其隐藏。顺便说一句，这里有一个语法错误

}5000）必须同意@DominicTobias您在这里做的是一个简单的表单验证，tbh应该在毫秒内完成，可能比显示图像的合理速度还要快。如果您希望在提交（数据）时执行此操作，您可以，但是您希望使用AJAX将表单数据发送到解析脚本，然后在AJAX调用成功时显示图像并隐藏它。我们可以在这方面为您提供帮助，但需要知道您正试图这样做。@pj100是的，这就是我想要做的，即使速度很快，我也需要包含AJAX以显示图像并隐藏图像，但不知道如何。。非常感谢你的帮助谢谢你的帮助。穆萨也是。。由于我有另一个函数validate，它有助于显示错误，现在它可以看到图像gif，但错误没有。如何将我的旧验证函数与ajax集成。我们应该在哪里触发它，从形式上？我只是更新了它，从某种字面意义上来说。您有一块
if
语句，只要添加
else
，如果没有满足任何验证步骤，就会触发ajax函数。不过，我会考虑用函数和回调来做这件事，这就足够了。
$('#myForm').submit(function (event) {
  // prevent the default action of the form, i.e. submitting 
  event.preventDefault() 

  if (document.f.username.value == "" && document.f.password.value == "") {
      alert(/*[[#{message.username} + #{message.password}]]*/);
      document.f.username.focus();
      return false;
  }
  else if (document.f.username.value == "") {
      alert(/*[[#{message.username}]]*/);
      document.f.username.focus();
      return false;
  }
  else if (document.f.password.value == "") {
      alert(/*[[#{message.password}]]*/);
      document.f.password.focus();
      return false;
    }
  }
  else{
    // serialize your form data
    var formdata = $(this).serialize();
    // show image 
    $('#loadingImg').fadeIn();
    // run ajax request
    $.ajax({
        method: 'POST',
        type: 'POST', // if using jquery 1.9 or earlier
        data: formdata,
        url: 'your/form/action',
        success: function (data) {
           $('#loadingImg').fadeOut(); 
        }
    });
  }
});