Показ изображения GIF во время обработки формы

Question

Я работаю над весенним веб-приложением, где у меня есть страница входа, но я хочу показать изображение в формате 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>

Я пытался добавить что-то в js, как эта функция

function validateGif(){

     var  myForm= document.getElementById('myForm');
     var  loadingImg= document.getElementById('loadingImg');

      myForm.style.display='none';
      loadingImg.style.display='block';

    setTimeout (function(){
        myForm.style.display='block';
      loadingImg.style.display='none';
    }5000);

}

Но я знаю, что это не работает правильно. Я хочу показывать изображение в формате gif до тех пор, пока форма отправляется, и если есть ошибки проверки, чтобы остановить рисунок и показать ошибку. Однако изображение gif должно все время загружаться в перенаправление после аутентификации.

Как лучше всего пройти через это.

Любая помощь приветствуется, спасибо!

Answer 1

Вот простой пример с 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(); 
        }
    });
  }
});