当页面提交时出现表单错误时， Loader会弹出并挂起

Question

我目前使用这个javascript弹出加载器，当我点击提交按钮。加载器在没有表单错误的情况下工作正常，等待后显示响应。然而，加载器继续旋转，当有一个表单输入错误弹出，请求没有被提交到后端，但加载器继续无限旋转。

<div id="loader" class= "lds-dual-ring hidden overlay" >
<div class="lds-dual-ring hidden overlay"> </div>
<div class="loadcontent"><div><strong>Working on your request...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>```
Here is the line where the pattern is being matched and form validation is being done upon clicking submit.

<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 eg. 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 run only when there is no form input error? I am using Django, Javascript, html and I am a beginner in JS.

Answer 1

我问了很多人的解决方案，但我想没有人能够理解这一点，没有看到完整的，因此没有人提供解决方案，最后这是解决方案:

我的javascript被触发的"点击"事件时，我不得不将其更改为"提交"。事件为我的表单id。就是这样! !

所以我的新javascript代码看起来像:

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

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


// $("#loading").html("Loading");
})
</script>

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