MVC BeginForm With Fading Circle Animation activated even there are Data Annotation Errors

Question

I have this Razor code.

    @Using Html.BeginForm("SaveBranch", "Branch", Model, FormMethod.Post, New With {.id = "myForm", .class = "form-horizontal", .role = "form", .onsubmit = "DisplayProgressMessage('#btnSave', 'Saving...');"})
    @Html.AntiForgeryToken()
    @<text>
        <form class="form-horizontal">
            <fieldset>
                <div class="col-md-6">
                    <div class="form-group">
                        <div class="row">
                            @Html.LabelFor(Function(m) m.BranchName, New With {.class = "col-md-2 control-label"})
                            <div class="col-md-10">
                                @Html.HiddenFor(Function(m) m.BranchID)
                                @Html.TextBoxFor(Function(m) m.BranchName, New With {.class = "form-control", .maxlength = 50})
                                @Html.ValidationMessageFor(Function(m) m.BranchName, "", New With {.class = "text-danger"})
                            </div>
                        </div>
                    </div>
<div class="row">
                        <button type="submit" id="btnSave" class="btn btn-primary pull-left"><i class="glyphicon glyphicon-save" style="margin-right: 4px;"></i> Save!</button>
                        <a href="@Url.Action("SearchMedexBranch", New With {.Server = Model.Server})" , class="btn btn-success pull-left" id="btnSearch"><i class="glyphicon glyphicon-search"></i> Back To Search</a>
                            <hr>
                        </div>
                </fieldset>
            </form>      
        </text> 
    End Using

<script>
    function DisplayProgressMessage(ctl, msg) {
        // Check if there are Data Annotation errors before starting the animation
        if (document.querySelectorAll(".field-validation-error").length > 0) {
            console.log("Field Error count :", document.querySelectorAll(".field-validation-error"));
            return false; // Prevent form submission when there are errors
        }
        $(ctl).prop("disabled", true).text(msg);
        $(".alert").removeClass("hidden");
        $("body").loadingModal({
            position: "auto",
            text: "Processing...",
            color: "#fff",
            opacity: "0.7",
            backgroundColor: "rgb(0,0,0)",
            animation: "fadingCircle"
        });
        console.log("Returning True...");
        return true;
    }

    // Add event listener to the form submission
    document.getElementById("myForm").addEventListener("submit", function (event) {
        // Call the DisplayProgressMessage function before submitting the form
        const formIsValid = DisplayProgressMessage(document.querySelector("button[type=submit]"), "Processing...");

        // If the function returns false, prevent the form submission
        if (!formIsValid) {
            // Re-enable the submit button and hide loading animation
            document.querySelector("button[type=submit]").removeAttribute("disabled");
            $(".alert").addClass("hidden");
            $("body").loadingModal("hide");
            event.preventDefault();
        }
    });
</script>

It calls a Fading Circle Animation while the Form saves in the controller. It works fine provided there are no Data Annotation errors.

If there are Data Annotation errors like empty fields, the POST is not called (w/c is good) but the Fading Circle Animation is called thereby making changes to the field impossible since the java script also disables the field and the Save button.

As you can see in the picture above, there is a Data Annotation Error "Please provide a Branch Code!" I do not want the fading circle to be invoked. I cannot proceed to edit the field if they are disabled. I only want the Fading Circle to appear if there are no errors.

I hope you can help me. :)