title: Submit form after successful ajax call using jQuery in asp.net mvc 5
body: <p>I have a form in an <code>Asp.net MVC 5</code> project which has a <code>Submit</code> button. When the <code>Submit</code> button is clicked, I want to do the following:</p>
  
  <ol>
  <li><p>Perform client=side validation using <code>jQuery</code> on various fields (required fields have been filled, email format is valid, etc...). That part is working fine.</p></li>
  <li><p>Make an <code>Ajax</code> call that will perform some server side validation by calling an action from the controller and return a <code>JSON</code> response. The response contains a Success property and Errors property which contains a list of errors. </p></li>
  </ol>
  
  <p>The Success property will return true if no error are found and the Errors property will be null. If errors are found the Success property is returns false and the Errors property contains a list of relevant errors. </p>
  
  <p>I'm calling '\ApplicationForm\Validate' action from my ApplicationForm controller and this part is working fine.</p>
  
  <ol start="3">
  <li>When no errors are found in part 2, I want my form to be submitted as normal and call the '\ApplicationForm\Index' action so that my data can then be added to my database. <strong>I cannot get this part to work!!</strong></li>
  </ol>
  
  <p>The <code>Submit</code> button is defined as follows:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
    &lt;div&gt;
      &lt;input type="button" id="btnApply" value="Apply" class="btn btn-primary" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My <code>JavaScript</code> code is defined as follows:</p>
  
  <pre><code>$('#AppllicationForm').submit(function () {
      if (!$(this).attr('validated')) {
          if ($(this).valid()) {
              $.ajax({
                  type: "POST",
                  data: $(this).serialize(),
                  url: "/ApplicationForm/ValidateForm",
                  dataType: 'json',
                  success: function (response) {
                      $('validationSummary').show();
                      if (response != null &amp;&amp; response.success) {
                          console.log('No Validation errors detected');
                          $('#ApplicationForm').attr('validated', true);
                          $('#ApplicationForm').attr('action', '/ApplicationForm/Index')
                              .submit();
                          return true;
                      }
                      else if (response != null &amp;&amp; !response.success) {
                          console.log('Validation errors detected');
                          var errors = response['errors'];
                          displayValidationErrors(errors);
                          window.scrollTo(0, 0);
                      }
                      return false;
                  },
                  error: function (response) {
                      $('validationSummary').hide();
                      console.log(response);
                      return false;
                  }
              });
          }
      }
      return false;
  });
  </code></pre>
  
  <p>The above is using a regular button but I've also tried to define its type as <code>Submit</code> but to no avail.</p>
  
  <p>I know similar questions have been posted in the past but I cannot find one that has actually helped me out to find a resolution to my problem, so please bear with me and do not mark this question as a duplicate unless there is an actual question/answer with an actual resolution to my problem. Much appreciated! </p>
  
  <p>The closest scenario I found to what I'm trying to achieve is can be found from this article on SO: <a href="https://stackoverflow.com/questions/6457702/submit-a-form-from-inside-an-ajax-success-function-that-checks-the-values">Submit a form from inside an ajax success function that checks the values</a></p>
  
  <p>I've been trying so many different things at this stage but nothing is working out. I either don't get the <code>Index</code> action to be called after the <code>ValidateForm</code> action, or either one or the other action is called or the only <code>Index</code> action is called or my model gets messed up, and the list goes on.</p>
  
  <p>I'm clearly not doing this correctly or missing something but I'm at a complete stand still for now. I'm hoping that it will be something silly that I've missed and hopefully someone will clarify this for me.</p>
  
  <p>Any help would be greatly appreciated. </p>