title: Multiple form validation: where to put $ajax when valid?
body: <p>I have multiple forms on a page and I'm trying to validate them with jQuery. The validation section is working, however, I can't figure out where to put the ajax if the form is valid.</p>
  
  <p>Update: I have no idea how many forms there will be as these are dynamically generated.</p>
  
  <pre><code>&lt;p&gt;&lt;a href=""&gt;reload&lt;/a&gt;&lt;/p&gt;
  
  &lt;div id="messages"&gt;
      &lt;div id="message"&gt;
          &lt;ul&gt;&lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;form action="#" method="post" class="form"&gt;
      &lt;select name="foo" class="required"&gt;
          &lt;option value=""&gt;Select...&lt;/option&gt;
          &lt;option value="foo"&gt;Foo&lt;/option&gt;
      &lt;/select&gt;
      &lt;input type="text" name="bar" class="required"&gt;
      &lt;input type="submit" value="submit"&gt;
  &lt;/form&gt;
  &lt;form action="#" method="post" class="form"&gt;
      &lt;select name="foo" class="required"&gt;
          &lt;option value=""&gt;Select...&lt;/option&gt;
          &lt;option value="snafoo"&gt;Snafoo&lt;/option&gt;
      &lt;/select&gt;
      &lt;input type="text" name="bar" class="required"&gt;
      &lt;input type="submit" value="submit"&gt;
  &lt;/form&gt;
  
  &lt;script src="//code.jquery.com/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $('.form').each(function() {
      $(this).validate({
          submitHandler:function(form) {
  
              var foo = $(form).find('select[name=foo]').val();
              var bar = $(form).find('input[name=bar]').val();
  
              form.submit();
          },
          rules: {
              foo: {
                  required: true
              },
               bar: {
                  required: true
              }
          },
          messages: {
              foo: {
                  required: 'Please select a foo'
              },
              bar: {
                  required: 'Please enter a bar'
              }
          },
  
          errorContainer: $('#messages'),
          errorLabelContainer: $('#messages ul'),
          wrapper: 'li',
  
          // callback functions to work with bootstrap
          highlight:function(element) {
              $(element).closest('.form-group').addClass('has-error');
          },
          unhighlight:function(element) {
              $(element).closest('.form-group').removeClass('has-error');
          }
  
      });
  });
  
  // if the form is valid, do some ajax...
  $('.form').on('submit', function(){
      if($(this).valid()){
  
          // testing...
          alert(foo);
  
          $.ajax({
              type: 'POST',
              url: 'script.php',
              data: 'foo=' + foo,
              cache: false,
              success: function(data){
                  // do stuff...
              }
          });
      }
      return false;
  });
  &lt;/script&gt;
  </code></pre>