Stop CSS loader spinning if form validation error, django, javascript-CodePudding

How do I stop the loader spinner showing if the form submit fails and the user has to complete a missing form field. The spinner keeps spinning forever while the user enters the missing information.

My submit button in the form:

...
  <div >
    <button type="submit"  onclick="showDiv()">Submit
    </button>
  </div>
</form>

My spinning loader below the form:

<span  id="loadingdisplay" style="display:none;"></span>

My javascript on click event to display spinning loader:

<script type="text/javascript">

        function showDiv() {
           document.getElementById('loadingdisplay').style.display = "block";
        }

</script>

CodePudding user response：

You can add a listener on your form or your field that will hide your loader.

<script>
var x = document.getElementById("myInputField");
x.addEventListener("focus", myFunctionHideDiv);


function myFunctionHideDiv() {
  document.getElementById('loadingdisplay').style.display = "block";
}
</script>

Ressources :

EventListener documentation
Event documentation