Bootstrap data-loading-text ONLY if client-side validation passes

Question

I have a form with a couple data fields. Each one has a quick client-side validation check. There is then a submit button:

@using (Html.BeginForm("ImportApi", "EveApi", FormMethod.Post, new { id = "register-form" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    <ol>
        <li>
            @Html.LabelFor(m => m.KeyId)
            @Html.TextBoxFor(m => m.KeyId)
            @Html.ValidationMessageFor(m => m.KeyId)
        </li>
        <li>
            @Html.LabelFor(m => m.vCode)
            @Html.TextBoxFor(m => m.vCode)
            @Html.ValidationMessageFor(m => m.vCode)
        </li>
    </ol>
    <input type="submit" id="register-btn" value="Register" data-loading-text="Loading..." />
}

I currently have:

$('#register-form').submit(function () {
    $('#register-btn').button('loading');
    return true;
});

Which changes the button to loading text when the form is submitted. However, it does this even if the client-side validation fails, causing it to remain in its "loading" state indefinitely because the page isn't reloaded.

I'm looking for a way to have it only call the $('#register-btn').button('loading'); when the form is actually submitted to the server and the page is guaranteed to be refreshed.

Answer 1

How about calling the valid() method before setting the text?

Something like:

$('#register-form').submit(function () {
   if($(this).valid()) {
     $('#register-btn').button('loading');
     return true;
   }
});