title: jquery validation: call ajax and close bootstrap modal form after entire form validates
body: <p>I'm using Bootstrap layout and <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="nofollow">the jQuery Validation Plugin</a>. I click on a button, a modal with the form opens. The user inputs some data and improves it until everything is correct. When he submits it, it should make <code>ajax</code> call and close the modal form (but if the validation fails, there should be no ajax and no modal closing). Below is my code:</p>
  
  <p>ajax call</p>
  
  <pre><code>$('#outcomeFormDialog form').on( "submit", function( event ) {
      var form = $(this);
      $.ajax({
          type: form.attr('method'),
          url: "../php/client/json.php",
          data: form.serialize(),
          success: function(data, status) {
              $(this).modal('hide');
          }
      });
  
      event.preventDefault();
  });
  </code></pre>
  
  <p>current validation code:</p>
  
  <pre><code> $('#outcomeFormDialog form').validate(
   {
    rules: {
      amount: {
        money: true,
        required: true
      },
      comment: {
        required: false
      }
    },
    highlight: function(element) {
      $(element).closest('.control-group')
      .removeClass('success').addClass('error');
    },
    success: function(element) {
      element
      .addClass('valid').closest('.control-group')
      .removeClass('error').addClass('success');
    }
   });
  </code></pre>
  
  <p>As far as I understood, jquery validation's <code>success</code> corresponds to each form element rather than entire form - so checking entire form validation should be done some other way.</p>
  
  <p>This is my form (mustache-driven):</p>
  
  <pre><code>&lt;div id="outcomeFormDialog" class="modal hide fade" role="dialog"&gt;
      &lt;form class="form-horizontal well" data-async data-target="#outcomeFormDialog" method="POST"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal"&gt;×&lt;/button&gt;
              &lt;h3 id="myModalLabel"&gt;Add outcome&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;fieldset&gt;
                  &lt;input name="type" type="hidden" value="add_outcome" /&gt;
                  &lt;div class="control-group"&gt;
                      &lt;label class="control-label" for="amount"&gt;Amount&lt;/label&gt;
                      &lt;div class="controls"&gt;
                          &lt;div class="input-prepend"&gt;
                              &lt;span class="add-on"&gt;{{ currency }}&lt;/span&gt;
                              &lt;input type="text" name="amount" class="input-xlarge" placeholder="00.01" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="control-group"&gt;
                      &lt;label class="control-label" for="comment"&gt;Comment&lt;/label&gt;
                      &lt;div class="controls"&gt;
                          &lt;input type="text" name="comment" class="input-xlarge" placeholder="Comment here..." /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/fieldset&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button class="btn" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;button type="submit" class="btn btn-primary"&gt;Save outcome&lt;/button&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>