Pemuat muncul dan berhenti berjalan: ralat borang apabila halaman diserahkan

Question

Saya sedang menggunakan javascript ini untuk memunculkan pemuat apabila butang serah diklik. Apabila tiada ralat bentuk, pemuat berfungsi dengan baik dan memaparkan respons selepas menunggu. Walau bagaimanapun, apabila ralat input borang muncul, pemuat terus berputar dan permintaan tidak diserahkan ke bahagian belakang, tetapi pemuat berputar tanpa had.

<div id="loader" class= "lds-dual-ring hidden overlay"
        <div class="lds-dwi-ring tindanan tersembunyi">
       <div class="loadcontent"><div><strong>Permintaan anda sedang diproses... Ia mungkin mengambil masa sehingga 2 minit. </strong></div></div>

    </div>

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


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

  


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

    })
</skrip>```
Ini ialah baris kod yang sepadan dengan corak dan melakukan pengesahan borang apabila serahan diklik. </pra>
<pre class="brush:php;toolbar:false;"><div class="form-group">
        <div class="form-control"style="padding: 0;">
            
                {% ifequal field.name 'Port' %}

                {% render_field field class="rowforinput form-control"ketinggian: 23px; margin-kanan: 0" / 16" corak="^[12]/1/(?:[1-3]d|4[0-8]|[1-9])$"

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

Bagaimanakah saya boleh menjadikan skrip pemuat ini hanya berjalan apabila tiada ralat input borang? Saya bekerja dengan Django, Javascript dan html dan saya seorang pemula dalam JS. 

Answer 1

Saya meminta ramai orang untuk penyelesaiannya tetapi saya rasa tiada siapa yang dapat memahami masalah itu tanpa melihat kod penuh jadi tiada siapa yang menawarkan penyelesaian dan akhirnya ini adalah penyelesaiannya:

Kod javascript saya menyala pada acara "klik" dan saya perlu menukarnya kepada acara "serahkan" untuk menampung id borang saya. Itu sahaja! !

Jadi kod javascript baharu saya adalah seperti berikut:

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


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

  


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

    })
</script>

Itu sahaja, itu penyelesaiannya.