Loader pops up and stops running: form error when page is submitted

Question

I'm currently using this javascript to pop up a loader when the submit button is clicked. When there are no form errors, the loader works fine and displays the response after waiting. However, when a form input error pops up, the loader keeps spinning and the request is not submitted to the backend, but the loader spins infinitely.

<div id="loader" class= "lds-dual-ring hidden overlay" >
        <div class="lds-dual-ring hidden overlay"> </div>
       <div class="loadcontent"><div><strong>Your request is being processed... It may take up to 2 minutes. </strong></div></div>

    </div>

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


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

  


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

    })
</script>```
This is the line of code that matches the pattern and does the form validation when submit is clicked. 

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

                {% render_field field class="rowforinput marginforfields form-control" style="height: 23px; margin-left: 0; margin-right: 0" title=" For example: 1/1/48 or 2/1/ 16" pattern="^[12]/1/(?:[1-3]\d|4[0-8]|[1-9])$" required=true %}

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

How can I make this loader script only run when there are no form input errors? I'm working with Django, Javascript and html and I'm a beginner in JS. 

Answer 1

I asked many people for the solution, but I guess no one could understand the problem without seeing the full code, so no one offered a solution, and finally this was the solution:

My javascript code fires on the "click" event and I need to change it to the "submit" event to accommodate my form id. That's it! !

So my new javascript code is as follows:

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


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

  


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

    })
</script>

That's it, that's the solution.