title: jQuery validate plugin allows submit when validation fails. Form is using .load
body: <p>I have built a form which is paginated (jQuery ajax style) over 6 pages.  I'm trying to get the jQuery validate plugin to work with it.</p>
  
  <p>At the bottom of the form is a 'next' button which submits the values for that page to the database and loads the next 'page' into the #pagination div using jQuery .load().</p>
  
  <p>I have just added jQuery validation to the form using the <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="nofollow">jQuery validate plugin</a>, but the validation flashes on the screen for a second and the page moves on to the next page anyway.  I'd be grateful for any help!  I'd like to allow the form to move to the next page if the validation is successful, but not if it is unsuccessful.  Here is my code (I have boiled it down to be as simple as possible):</p>
  
  <h3>jQuery</h3>
  
  <pre><code>jQuery(document).ready(function(){
      jQuery("#survey").validate();   
      var page=1; //Set first page on load
      jQuery("#pagination").load("survey_"+page+".htm");
  
      jQuery("#next").click(function(){
  
          if(page !== 6){
              page=page+1;}
          if(page == 6){
              jQuery('#next').replaceWith('&lt;button id="submit" type="button"&gt;Submit&lt;/button&gt;');
          }
          else
          {page == 6;}
  
      jQuery("#pagination").load("survey_"+page+".htm");
   });
  </code></pre>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;form class="survey" id="survey" method="post" action=""&gt;
      &lt;div id="pagination"&gt;
  &lt;/div&gt;
  &lt;div class="nav"&gt;&lt;input id="prev" type="submit" value="Previous" &gt;&lt;input class="submit" id="next" value="Next" name="submit" type="submit" /&gt;&lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The form pages are in 6 separate files called survey_1.htm, survey_2.html....survey_6.htm, and as you can see above, they are loaded using .load().</p>
  
  <p>As mentioned, I'd like to allow the form to move to the next page if the validation is successful, but not if it is unsuccessful. At the moment, the validation flashes on screen before the next page is loaded.</p>
  
  <p>Many thanks!</p>