Do not display the gif loader When canceling the registration of the form with e.preventDefault

I have a form and I have an image in it that shows the user when the form is submitted, waiting for the operation to be completed. I have no problem with submit operation.

When the form registration is canceled with e.preventDefault(), how can I not display the gif loader so that the user can control his inputs?

The problem is that when the submitting is canceled, the gif loader is still displayed

AddEdit form:

<div id="pageloader" style="display:none">
    <img src="~/Content/Images/loader.gif" alt="Loading..."/>
</div>
    
<script>

    $(document).ready(function () {
        $("#AddEditForm").on("submit", function (e) {
            $("#pageloader").fadeIn();
        });//submit
    });
    

    
    $(document).ready(function () {
        $("form").submit(function (e) {
            if (!validData()) {                        
                e.preventDefault();                         
                return false;
            }
            return true;                    
        });
    });
    
</script>
    
    
<style>
    #pageloader {
        background: rgba( 255, 255, 255, 0.7 );
        display: none;
        height: 100%;
        position: fixed;
        width: 100%;
        z-index: 9999;
    }
    
    #pageloader img {
        left: 60%;
        margin-left: -32px;
        margin-top: -32px;
        position: absolute;
        top: 40%;
    }
</style>

I want to write a general function or event that whenever any form registration is canceled, the gif is not displayed or its display is stopped.

Can I do that?

Answer

You can use $("#pageloader").fadeOut(); or $("#pageloader").hide(); when your data is not valid like this:

$(document).ready(function () {
    $("form").submit(function (e) {
        if (!validData()) {
            $("#pageloader").fadeOut();
            //or $("#pageloader").hide();
            e.preventDefault();
            return false;
        }
        return true;
    });
});

Here is working sdample:

$(document).ready(function () {
    $("#AddEditForm").on("submit", function (e) {
        $("#pageloader").fadeIn();
    });//submit
});

$(document).ready(function () {
    $("form").submit(function (e) {
        if (!validData()) {
            $("#pageloader").fadeOut();
            e.preventDefault();
            return false;
        }
        return true;
    });
});


function validData() {
      return false;
}
 #pageloader {
            background: rgba( 255, 255, 255, 0.7 );
            display: none;
            height: 100%;
            position: fixed;
            width: 100%;
            z-index: 9999;
        }

            #pageloader img {
                left: 60%;
                margin-left: -32px;
                margin-top: -32px;
                position: absolute;
                top: 40%;
            }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="pageloader" style="display:none">
    <img src="loader.gif" alt="Loading..." />
</div>

<form id="AddEditForm">
     <input type="submit" value="submit" />
</form>