title: Bootstrap data-loading-text ONLY if client-side validation passes
body: <p>I have a form with a couple data fields. Each one has a quick client-side validation check. There is then a submit button:</p>
  
  <pre><code>@using (Html.BeginForm("ImportApi", "EveApi", FormMethod.Post, new { id = "register-form" }))
  {
      @Html.AntiForgeryToken()
      @Html.ValidationSummary(true)
      &lt;ol&gt;
          &lt;li&gt;
              @Html.LabelFor(m =&gt; m.KeyId)
              @Html.TextBoxFor(m =&gt; m.KeyId)
              @Html.ValidationMessageFor(m =&gt; m.KeyId)
          &lt;/li&gt;
          &lt;li&gt;
              @Html.LabelFor(m =&gt; m.vCode)
              @Html.TextBoxFor(m =&gt; m.vCode)
              @Html.ValidationMessageFor(m =&gt; m.vCode)
          &lt;/li&gt;
      &lt;/ol&gt;
      &lt;input type="submit" id="register-btn" value="Register" data-loading-text="Loading..." /&gt;
  }
  </code></pre>
  
  <p>I currently have:</p>
  
  <pre><code>$('#register-form').submit(function () {
      $('#register-btn').button('loading');
      return true;
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>I'm looking for a way to have it only call the <code>$('#register-btn').button('loading');</code> when the form is actually submitted to the server and the page is guaranteed to be refreshed.</p>