ローダーがポップアップして実行を停止します: ページの送信時にフォーム エラーが発生します

Question

現在、この JavaScript を使用して、送信ボタンがクリックされたときにローダーをポップアップします。フォームエラーがない場合、ローダーは正常に動作し、待機後に応答を表示します。ただし、フォーム入力エラーがポップアップすると、ローダーは回転し続け、リクエストはバックエンドに送信されず、ローダーは無限に回転します。

<div id="loader" class= "lds-dual-ring 隠しオーバーレイ" >
        <div class="lds-dual-ring 隠しオーバーレイ"<</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 フィールド名 'ポート' %}

                {% render_field field class="rowforinput marginforfields form-control" style="height: 23px; margin-left: 0; margin-right: 0" title=" 例: 1/1/48 または 2/1 / 16" パターン="^[12]/1/(?:[1-3]\d|4[0-8]|[1-9])$" required=true %}

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

フォーム入力エラーがない場合にのみこのローダー スクリプトを実行するにはどうすればよいですか?私は Django、JavaScript、HTML を使用していますが、JS の初心者です。 

Answer 1

多くの人に解決策を尋ねましたが、コード全体を見ないと問題を理解できない人はいなかったので、誰も解決策を提示せず、最終的にこれが解決策になりました。

私の JavaScript コードは「クリック」イベントで起動するので、フォーム ID に合わせて「送信」イベントに変更する必要があります。それでおしまい！ ！

つまり、私の新しい JavaScript コードは次のとおりです:

リーリー

それが解決策です。