How to stop ajax spinner on ASP.NET MVC register form if client side validation fails

Question

I have an MVC5 register page with 2 forms - one to register via Facebook, and one to register via a local account.

My problem is that I've added ajax progress indicators to both forms, but I can't get the spinner to stop spinning on client validation failure.

The following code is my login with Facebook button, and when the user clicks it the button is replaced by a spinning ajax indicator:

    @using (Ajax.BeginForm("ExternalLogin", "Account", null, new AjaxOptions { LoadingElementId = "loader" }, new { id = "fbForm" }))
    {
        @Html.AntiForgeryToken()

        <p class="text-center">
            <button type="submit" id="Facebook" name="provider" value="Facebook" title="Log in using your Facebook account">Sign in with Facebook</button>
            <div id="fbLoader" style="display:none; text-align:center">
                <img src="/images/Ajaxloader.gif" height="31" width="31" />
            </div>
        </p>


    $(document).ready(function () {

        $('#fbForm').submit(function () {
            $('#fbForm button').hide();
            $('#fbForm #fbLoader').show();

            return true;
        });

    });

I've tried to use the exact code for my local login registration, and it works perfectly is server side validation fails (such as when the account name alreay exists), but for client side validation (such as confirm password doesn't match, or password not long enough) the ajax spinner starts, but never disappears.

I've tried adding Microsoft.jQuery.Unobtrusive.Ajax and using OnBegin and OnSuccess to work around this, but then while I got the local login working the way I wanted, the Facebook login broke with the following error:

XMLHttpRequest cannot load https://www.facebook.com/dialog/oauth?response_type=code&client_id=57560734…Igt2j28GIN_o6bk5MTZTtv_u8NxSzz1_NvnohC9-HqpzJMBrhxT737xJmNLCY4q_Gg0UORz5UH. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://localhost:44300' is therefore not allowed access. 

Answer 1

I fixed this by using the following code for my local form:

        $("#btnSubmit").click(function (evt) {
            var options = {};
            options.beforeSend = function () {
                $('#localForm #btnSubmit').hide();
                $('#localForm #localLoader').show();
                $("#localForm").submit();
            };
            options.complete = function () {
                $('#localForm #btnSubmit').show();
                $('#localForm #localLoader').hide();
            };
            $.ajax(options);
            evt.preventDefault();
        });