Show animation on form submission after jQuery validation Razor Page

Question

I want to show a loading animation when a form is submitted, currently I do this with a on click function which shows a bootstrap Modal with the animation within. (HTMl below simplified for question)

 <form id="settings" method="post" enctype="multipart/form-data">
    <h3 class="Warehouse-Header">Warehouse Address</h3>
    <label asp-for="WarehousesModel.Name" class="control-label"></label>
    <input asp-for="WarehousesModel.Name" required class="form-control" placeholder="Name" autocomplete="off" />
    <button type="submit" data-wait="Please wait..." class="button w-button mx-2">Save</button>
 </form>


<!-- Modal -->
<div class="modal fade" id="updating" tabindex="-1" aria-labelledby="updating" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content  modal-clear">
            <img class="loading-img" src="~/images/loading.gif" />
        </div>
    </div>
</div>


@section Scripts {
    @{
        //Default Razor page .NET core validation jQuery
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
}

<script>
    $(document).ready(function () {
        $('form').on("submit", function () {
            $('#updating').modal('show');
        });
    });

//One of the things I tried:

$("form").submit(function() {
    if($(this).valid()) {
       //go ahead
    } else {
       //do some error handling
    }
});

</script>

The above will show the Modal on form submission however if the jQuery validation has failed it still shows the animation making hard for the user to realised it failed and not that its taking ages to submit. I've tried using the jQuery validation docs however can't get any functions to work.

Answer 1

he above will show the Modal on form submission however if the jQuery validation has failed it still shows the animation making hard for the user to realised it failed and not that its taking ages to submit. I've tried using the jQuery validation docs however can't get any functions to work.

Using the .valid() for the form tag is the right way to let the codes know if the form is valid or not.

But for showing which input textbox is the wrong, you need use the other taghelper like asp-validation-for to achieve it. So you should add the code like this:

  <span asp-validation-for="Name" class="text-danger"></span>

It will show the error message by default.

More details, you could refer to below sample:

Model class:

public class WarehousesModel
{
    [Required]
    public string Name { get; set; }
}

View:

<form id="settings" method="post" enctype="multipart/form-data">
    <h3 class="Warehouse-Header">Warehouse Address</h3>
    <label asp-for="Name" class="control-label"></label>
    <input asp-for="Name" required class="form-control" placeholder="Name" autocomplete="off" />
    <span asp-validation-for="Name" class="text-danger"></span>
    <button type="submit" data-wait="Please wait..." class="button w-button mx-2">Save</button>
</form>


<!-- Modal -->
<div class="modal fade" id="updating" tabindex="-1" aria-labelledby="updating" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content  modal-clear">
            <img class="loading-img" src="~/images/loading.gif" />
        </div>
    </div>
</div>


    @section Scripts {
        @{
            //Default Razor page .NET core validation jQuery
            await Html.RenderPartialAsync("_ValidationScriptsPartial");
        }

    <script>
        $(document).ready(function () {
            $('form').on('submit', function (event) {
                // Check if the form is valid using jQuery Validation plugin
                if ($(this).valid()) {
                    // If valid, show the modal
                    $('#updating').modal('show');
                } else {
                    // If not valid, prevent the default form submission
                    console.log("fired");
                    event.preventDefault();           
                }
            });
        });
    </script>
    }

Result: