Loader erscheint und läuft nicht mehr: Formularfehler beim Absenden der Seite

Question

Ich verwende derzeit dieses Javascript, um einen Loader aufzurufen, wenn auf die Schaltfläche „Senden“ geklickt wird. Wenn keine Formularfehler vorliegen, funktioniert der Loader einwandfrei und zeigt die Antwort nach dem Warten an. Wenn jedoch ein Formulareingabefehler auftritt, dreht sich der Loader weiter und die Anfrage wird nicht an das Backend übermittelt, sondern der Loader dreht sich unendlich.

<div id="loader"
        <div class="lds-dual-ring verstecktes Overlay">
       <div class="loadcontent"><div><strong>Ihre Anfrage wird bearbeitet... Es kann bis zu 2 Minuten dauern. </strong></div></div>

    </div>

$('#submitBtn').click(function () {


        $('#loader').removeClass('hidden')
        // $('#loader').html('Loading').addClass('loadcontent')

  


        // $("#loading").html("Loading");

    })
</script>```
Dies ist die Codezeile, die dem Muster entspricht und die Formularvalidierung durchführt, wenn auf „Senden“ geklickt wird. 

<div class="form-group">
        <div class="form-control"style="padding: 0;">
            
                {% ifequal field.name 'Port' %}

                {% render_field field class="rowforinput marginforfields" style="height: 23px; margin-right: 0" / 16" pattern="^[12]/1/(?:[1-3]d|4[0-8]|[1-9])$"

            {% endifequal %} </div>
    </div>

Wie kann ich dafür sorgen, dass dieses Loader-Skript nur ausgeführt wird, wenn keine Formulareingabefehler vorliegen? Ich arbeite mit Django, Javascript und HTML und bin ein Anfänger in JS. 

Answer 1

我向很多人询问了解决方案，但我猜没有人能够在没有查看完整代码的情况下理解这个问题，因此没有人提供解决方案，最后这就是解决方案：

我的javascript代码在“click”事件上触发，而我需要将其更改为“submit”事件以适应我的表单id。就是这样！！

所以我的新javascript代码如下：

$('#configForm').submit(function () {


        $('#loader').removeClass('hidden')
        console.log("HERE LOADER")
        // $('#loader').html('Loading').addClass('loadcontent')

  


        // $("#loading").html("Loading");

    })
</script>

就是这样，这就是解决方案。