載入器彈出並停止運作：當頁面提交時出現表單錯誤

Question

我目前正在使用這個javascript，在點擊提交按鈕時彈出一個載入器。當沒有表單錯誤時，載入器可以正常工作，並在等待後顯示回應。然而，當有表單輸入錯誤彈出時，載入器會一直旋轉，請求不會提交到後端，但載入器會無限旋轉。

<div id="loader" class= "lds-dual-ring hidden overlay" >
        <div class="lds-dual-ring hidden overlay"> </div>
       <div class="loadcontent"><div><strong>正在處理您的請求...可能需要最多2分鐘。 </strong></div></div>

    </div>

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


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

  


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

    })
</script>```
這是匹配模式並在點擊提交時進行表單驗證的程式碼行。 

<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=" 16" pattern="^[12]/1/(?:[1-3]\d|4[0-8]|[1-9])$" required=true %}

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

如何讓這個載入器腳本只在沒有表單輸入錯誤時運作？我正在使用Django、Javascript和html，我是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>

就是這樣，這就是解決方案。