title: jQuery Form Validation before Ajax submit
body: <p>JavaScript bit:</p>
  
  <pre><code>$(document).ready(function()
      {
              $('#form').submit(function(e)
              {     
  
                  e.preventDefault();
                  var $form = $(this);
  
                  // check if the input is valid
                  if(! $form.valid()) return false;
                      $.ajax(
                      {
                      type:'POST',
                      url:'add.php',
                      data:$('#form').serialize(),
                      success:function(response)
                      {
                          $("#answers").html(response);
                      }
                  });     
  
              })
      });
  </code></pre>
  
  <p>HTML bit:</p>
  
  <pre><code>    &lt;input type="text" name="answer[1]" class="required" /&gt;
      &lt;input type="text" name="answer[2]" class="required" /&gt;
  </code></pre>
  
  <p>So this is the code I am trying to use. The idea is to get all my inputs validated before I send my form with Ajax. I've tried numerous versions of this now but every time I end up with submitting even though the form is not entirely filled out. All my inputs are of the "required" class. Can anyone see what I am doing wrong?</p>
  
  <p>Also, I depend on class-based requirements as my input names are generated with php so I can never be sure what name[id] or input types I get.</p>
  
  <p>I show/hide questions as I go through it in "pages".</p>
  
  <pre><code>&lt;input type="button" id="next" onClick="toggleVisibility('form3')" class="next-btn"/&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>function toggleVisibility(newSection) 
          {
              $(".section").not("#" + newSection).hide();
              $("#" + newSection).show();
          } 
  </code></pre>