title: Disable button on submit with xVal MVC
body: <p>I have an MVC app using xVal. I am trying to hook into the jquery validation to show a "loading" graphic once the form is valid. I cannot seem to find a way to only show the qraphic when jquery has validated the form.</p>
  
  <p>However, it also disables the button when the button is clicked and is NOT validated stopping the user from re-submitting the form one the client side errors are corrected. </p>
  
  <p>Does anyone have any experience doing this. </p>
  
  <p>Thanks</p>
  
  <p>R</p>
  
  <p>Here is the entire page source</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;&lt;title&gt;
  
      &lt;/title&gt;&lt;link href="../Content/wri_mainstyles.css" rel="stylesheet" type="text/css" /&gt;
  
          &lt;script type="text/javascript" src="/Scripts/jquery-1.3.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="/Scripts/jquery.validate.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="/Scripts/xVal.jquery.validate.js"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript"&gt;
              $(document).ready(function() {
  
                  // ---- notification pane
                  $("#notify-container").fadeOut(4000);
  
                  // ---- tab bar related code
                  var sel;
                  $("#nav a").mouseover(function() {
                      if ($(this).data("clicked")) { return; }
                      $(this).children("img").each(function() {
                          this.src = $(this).attr("src").replace(/_off\.gif$/ig, "_on.gif");
                      });
                  }).mouseout(function() {
                      if ($(this).data("clicked")) { return; }
                      $(this).children("img").each(function() {
                          this.src = $(this).attr("src").replace(/_on\.gif$/ig, "_off.gif");
                      });
                      //handle clicks
                  }).click(function() {
                      if (sel != null) {
                          $("#nav").find("img").each(function() {
                              this.src = this.src.replace(/_clk\.gif$/i, "_off.gif");
  
                          });
                      }
                      $(this).children("img").each(function() {
                          this.src = $(this).attr("src").replace(/_on.gif$/ig, "_clk.gif");
                      })
                      sel = this;
                  });
                  //panel pop up code
  
                  //hide panel on load.
                  $("#top-panel").hide();
  
                  //toggle when clicked. 
                  $("#sub-panel").click(function() {
                      $("#top-panel").slideToggle();
                      var el = $("#shText");
                      var state = $("#shText").html();
                      state = (state == 'Close Panel' ? '&lt;span id="shText"&gt;Open Panel&lt;/span&gt;' : '&lt;span id="shText"&gt;Close Panel&lt;/span&gt;'); 
                      el.replaceWith(state);
                  });
  
              });
          &lt;/script&gt;
  
  
      &lt;script type="text/javascript" language="javascript"&gt;
          $(function() { // make this code initialize when DOM loads
              $('#frmXL').submit(function() {
              $('input[type="submit"]', this).replaceWith('&lt;span id="loading"&gt;&lt;/span&gt;'); // 
              });
          });
      &lt;/script&gt;
  
  
  
  
      &lt;/head&gt;
  
      &lt;body&gt;
      &lt;div class="wrapper"&gt;
          &lt;div id="nav"&gt;
              &lt;div id="logo"&gt;&lt;img src="../../Content/Images/inbox_wrilogo.gif"  width="143" height="28" alt="logo" border="0"  /&gt;&lt;/div&gt;
              &lt;div id="tab1"&gt;&lt;a href="/Support"&gt;&lt;img alt="Support" border="0" height="22" name="support" src="/Content/Images/nav_support_off.gif" width="75"&gt;&lt;/img&gt;&lt;/a&gt;&lt;/div&gt;
  
              &lt;div id="tab2"&gt;&lt;a href="/Account"&gt;&lt;img alt="Account" border="0" height="22" name="account" src="/Content/Images/nav_acct_off.gif" width="75"&gt;&lt;/img&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div id="tab3"&gt;&lt;a href="/"&gt;&lt;img alt="Inbox" border="0" height="22" name="inbox" src="/Content/Images/nav_inbox_off.gif" width="75"&gt;&lt;/img&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;
  
  
  
      &lt;form action="/Security/Login?ReturnUrl=%2f" id="frmXL" method="post"&gt;
             &lt;div id="loginwrapper"&gt;
  
              &lt;div id="logincontainer"&gt;
                  &lt;div id="logincontrol"&gt;
                     &lt;p&gt;
  
                      &lt;label for="username" accesskey="u"&gt;Email Address&lt;/label&gt;
                      &lt;input class="frmInput" id="EmailAddress" name="EmailAddress" type="text" value="" /&gt; 
  
                     &lt;/p&gt;
  
                      &lt;p&gt;
                      &lt;label for="password" accesskey="p"&gt;Password&lt;/label&gt;
                      &lt;input class="frmInput" id="Password" name="Password" type="password" /&gt;
  
                      &lt;/p&gt;
  
  
  
                      &lt;label for="RememberMe"&gt;Remember Me&lt;/label&gt;
  
                      &lt;div id="rememberwrapper"&gt;
                       &lt;span class="rememberme"&gt;&lt;input id="RememberMe" name="RememberMe" type="checkbox" value="true" /&gt;&lt;input name="RememberMe" type="hidden" value="false" /&gt;&lt;/span&gt; 
                      &lt;/div&gt;
  
                      &lt;p&gt;
                      &lt;input class="frmbtnsubmit" type="submit" value="Login" /&gt;
                      &lt;/p&gt;
                  &lt;/div&gt; 
  
                  &lt;span class="homelink"&gt;
                  &lt;a class="hmlink" href="/Security?Length=4"&gt;Back to Homepage&lt;/a&gt;
  
                  &lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/form&gt;&lt;input name="__RequestVerificationToken" type="hidden" value="DolZ3JoPXziTgPTvWZLqxl/2z16aolj3gjZzHeB2cbs0a+6O17w9bWm3K9XOS/GX" /&gt;
          &lt;script type="text/javascript"&gt;xVal.AttachValidator(null, {"Fields":[{"FieldName":"EmailAddress","FieldRules":[{"RuleName":"RegEx","RuleParameters":{"Pattern":"^(?:[a-zA-Z0-9_\u0027^&amp;amp;/+-])+(?:\\.(?:[a-zA-Z0-9_\u0027^&amp;amp;/+-])+)*@(?:(?:\\[?(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))\\.){3}(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\]?)|(?:[a-zA-Z0-9-]+\\.)+(?:[a-zA-Z]){2,}\\.?)$"},"Message":"Email address is invalid."},{"RuleName":"Required","RuleParameters":{},"Message":"This is a required field."},{"RuleName":"RegEx","RuleParameters":{"Pattern":"^(?:[a-zA-Z0-9_\u0027^&amp;amp;/+-])+(?:\\.(?:[a-zA-Z0-9_\u0027^&amp;amp;/+-])+)*@(?:(?:\\[?(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))\\.){3}(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\]?)|(?:[a-zA-Z0-9-]+\\.)+(?:[a-zA-Z]){2,}\\.?)$"},"Message":"Email address is invalid."},{"RuleName":"Required","RuleParameters":{},"Message":"This is a required field."}]},{"FieldName":"Password","FieldRules":[{"RuleName":"Required","RuleParameters":{},"Message":"This is a required field."},{"RuleName":"Required","RuleParameters":{},"Message":"This is a required field."}]}]})&lt;/script&gt;
  
  
  
  
       &lt;/div&gt;
  
  
      &lt;!-- RDD: Do not remove this div. This help keep the footer at the bottom of the page --&gt;
       &lt;div class="push"&gt;&lt;/div&gt; 
      &lt;!-- end --&gt;
  
  
  
  
      &lt;div id="top-panel"&gt;
              &lt;span id="appversion" class="footertext"&gt;Inbox Swf Version: 0.0.0.1&lt;br /&gt;Web Application Version: 0.0.75.12305&lt;/span&gt;
      &lt;/div&gt;
      &lt;div id="#footercontent"&gt;  
          &lt;div class="footer"&gt;
              &lt;div id="footertext"&gt;&amp;copy; Copyright 2009 All Rights Reserved&lt;/div&gt;
  
              &lt;div id="sub-panel"&gt;&lt;a title="View support panel" href="#" id="toggle"&gt;&lt;span id="shText"&gt;Open Panel&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
           &lt;/div&gt;    
      &lt;/div&gt;    
  
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>