title: How to submit ASP NET MVC3 Form through ajax while overriding default behavior while maintaining client side validation
body: <p>I want to be able to post this form data using an ajax post, but I cannot figure out how to override the default behavior when the form is posted. I still want client side validation from ASP NET MVC3 though. For example, when I click "submit" in this form, it goes directly to the controller action when I have a jquery function that is supposed to directly handle any submit from this form.</p>
  
  <pre><code> @model BlogApp.Models.PostUser
  
   @using (Html.BeginForm("LoginForm", "Home", FormMethod.Post, new { id = "testform" }))
  {
  @Html.ValidationSummary(true)
  &lt;fieldset&gt;
      &lt;div class="editor-label"&gt;
          @Html.LabelFor(model =&gt; model.Name)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          @Html.EditorFor(model =&gt; model.Name, new { id = "Name" })
          @Html.ValidationMessageFor(model =&gt; model.Name)
      &lt;/div&gt;
          &lt;input type="submit" value="submit" /&gt;
  &lt;/fieldset&gt;
  }
  </code></pre>
  
  <p>this is the jquery function:</p>
  
  <pre><code> $('#testform').live('submit', function () {
      $('#testform').validate();
  
      var name = $('#Name').val();
      var logout = '&lt;a href="#" onClick="logOut()"&gt;logout&lt;/a&gt;';
      var login_success = '&lt;p&gt;Logged in as: ' + name + '&lt;/p&gt;' + logout;
  
      if ($(this).valid()) {
          $.ajax({
              url: '/home/loginform',
              type: 'POST',
              data: { name: name },
              success: function (data) {
                  if (data === true) {
                      $('#loginform').empty();
                      $('#loginform').append(login_success);
                  }
                  else {
                      alert('Failed to save the user');
                  }
              }
          });
      }
  
  
  }); 
  </code></pre>
  
  <p>So my question is: instead of the form automatically going to the controller action (/Home/LoginForm/) and returning that result, how can I make submitting the form fire my jquery function (so that the page doesn't auto-refresh), but still maintaining the client side validation? </p>