加载器弹出并停止运行：当页面提交时出现表单错误

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=" 例如：1/1/48或2/1/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>

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