title: jquery validation plugin and submitHandler
body: <p>I have a <code>form</code> that is using jQuery validation and is also making ajax calls to a database via <code>php</code> to display information after the first select, and then after submit.</p>
  
  <p>This is as close as I can get it to working.  The only remaining problem is that the <code>form</code> will allow the user to submit it when there are validation errors that should be corrected.</p>
  
  <p>I believe the <code>submitHandler</code> is the key to making it work, but any code I have tried where I comment <code>//tried various things here</code> has caused various different problems.</p>
  
  <p>Here is the code for the page:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="../../jquery_theme/js/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="dist/jquery.validate.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $(document).ready(function(){
  $("#commentForm").validate({
      submitHandler: function(form) {
          //tried various things here
          }
      });
   });
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;form class="cmxform" id="commentForm"  &gt;
  &lt;fieldset&gt;
  
   &lt;p&gt; &lt;label for="select_part"&gt;Select Part to Adjust Count&lt;/label&gt;&lt;/p&gt;  
  
            &lt;div&gt;  &lt;select name="id_part" id="select_part" class="required" &gt;
                  &lt;option value=""&gt;---&lt;/option&gt;
                  &lt;option value="1"&gt;option1&lt;/option&gt;
                  &lt;option value="2"&gt;option2&lt;/option&gt;
  
              &lt;/select&gt;
  
                  &lt;div id="returnedValue" class="ajaxReturn"&gt;&lt;/div&gt;
              &lt;/div&gt;
                  &lt;br /&gt;
  
   &lt;p&gt;
   &lt;label for="cname"&gt;Name&lt;/label&gt;
   &lt;em&gt;*&lt;/em&gt;&lt;input id="cname" name="name" size="25" class="required" minlength="2" /&gt;
   &lt;/p&gt;
   &lt;input id="submitForm" class="submit" type="submit" value="Submit"/&gt;
   &lt;/p&gt;
   &lt;/fieldset&gt;
   &lt;/form&gt;
   &lt;p&gt;&lt;div id="returns"&gt;&lt;/div&gt;&lt;/p&gt;
   &lt;script type="text/javascript" src="validateTestDB.js"&gt;&lt;/script&gt;
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>Here is the javascript that feeds info back to the page:</p>
  
  <pre><code>$('#select_part').change(function(){
  var select_part = $('#select_part').val();
  
  
  $.post('../../php/getCounts.php', { select_part: select_part}, function(data){
  $('#returnedValue').hide().html(data).fadeIn(1200);
  
  
        });
     });
  
   $('#submitForm').click(function(){
  
  
  var select_part = $('#select_part').val();
  var name = $('#cname').val();
  $.post('validateResult.php', {select_part: select_part, name: name}, function (data3){
      $('#returns').html(data3);
       });
  
  }); 
  </code></pre>
  
  <p>I've been reading and trying things for two days, and I'm just stuck.</p>