title: Problems with jQuery form validation and Ajax submit
body: <p>I have created a dynamic form using jQuery that has two sections, once the first section has been completed correctly the second section loads without page refresh. </p>
  
  <p>My problem is that when the second section is complete I need the validation to be performed and obviously ensure no incorrect data is sent to the server. What is happening is that the validation works on the initial click of the submit button but even without fixing the data in the form input fields if I click the submit button a second time the incorrect data is submitted? </p>
  
  <p>I have searched online for an answer and have tried a few different things:</p>
  
  <p>I tried changing the second submit method to:</p>
  
  <pre><code>$('infoform').submit(function() {
  // .. stuff 
  </code></pre>
  
  <p>});</p>
  
  <p>but this didnt work and it was also suggested that I try:</p>
  
  <pre><code>$('#submit_second').submit(function(evt){
  evt.preventDefault();
  ...
  </code></pre>
  
  <p>});</p>
  
  <p>but this also didnt work, only prevented the validation from working completely?</p>
  
  <p>What I want is obviously to have the validation keep checking for errors until the data entered is correct and once there are no longer errors for the data to be then sent using the ajax call?</p>
  
  <p>The code for the form is:</p>
  
  <pre><code> &lt;form id="infoform" name="infoform" action="#" method="post"&gt;
  
          &lt;div id="first_step"&gt;
  
                  &lt;!--&lt;h1&gt;WANT A FREE&lt;br /&gt;SOCIAL MEDIA&lt;br /&gt;AUDIT?&lt;/h1&gt;--&gt;
                  &lt;div class="formtext-img"&gt;&lt;/div&gt;
  
                  &lt;div class="form"&gt;
  
                      &lt;label for="username"&gt;Facebook or Twitter page address:&lt;/label&gt;
                      &lt;input type="text" name="url" id="url" value="http://" /&gt;                       
  
                  &lt;/div&gt;&lt;!-- clearfix --&gt;&lt;div class="clear"&gt;&lt;/div&gt;&lt;!-- /clearfix --&gt;
  
                      &lt;input class="submit" type="submit" name="submit_first" id="submit_first" value="" /&gt;
          &lt;/div&gt;&lt;!--end of first step--&gt;
  
  
          &lt;div id="second_step"&gt;
  
  
                  &lt;div class="form"&gt;
  
                      &lt;div id="nameInput"&gt;
                      &lt;label for="yourname"&gt;Your Full Name. &lt;/label&gt;
                      &lt;!-- clearfix --&gt;&lt;div class="clear"&gt;&lt;/div&gt;&lt;!-- /clearfix --&gt;
                      &lt;input type="text" name="yourname" id="yourname" placeholder="Your name" /&gt; 
                      &lt;/div&gt;
                      &lt;!-- clearfix --&gt;&lt;div class="clear"&gt;&lt;/div&gt;&lt;!-- /clearfix --&gt;
                      &lt;div id="emailInput"&gt;                   
                      &lt;label for="email"&gt;Your email address.&lt;/label&gt;
                      &lt;input type="text" name="email" id="email" placeholder="Email address" /&gt;
                      &lt;/div&gt;
                      &lt;!-- clearfix --&gt;&lt;div class="clear"&gt;&lt;/div&gt;&lt;!-- /clearfix --&gt;
                      &lt;div id="phoneInput"&gt;
                      &lt;label for="phone"&gt;Your contact number. &lt;/label&gt;
                      &lt;!-- clearfix --&gt;&lt;div class="clear"&gt;&lt;/div&gt;&lt;!-- /clearfix --&gt;
                      &lt;input type="text" name="phone" id="phone" placeholder="contact number" /&gt;  
                      &lt;/div&gt;
  
                  &lt;/div&gt;      &lt;!-- clearfix --&gt;&lt;div class="clear"&gt;&lt;/div&gt;&lt;!-- /clearfix --&gt;
  
                      &lt;!--&lt;input class="back" type="button" value="" /&gt;--&gt;
  
                      &lt;input class="send submit" type="submit" name="submit_second" id="submit_second" value="" /&gt;
  
          &lt;/div&gt;&lt;!--end of second step--&gt;
  
      &lt;/form&gt;
  </code></pre>
  
  <p>And here is my jQuery, i have tried merging the two "submit_second" functions into one but this stopped anything happening when the second submit button was clicked!</p>
  
  <pre><code>$('#submit_second').click(function(){
  
      //remove classes
      $('#second_step input').removeClass('error').removeClass('valid');
  
      var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
      var phonePattern = /^\+?[0-9]{0,15}$/ ;  
      var fields = $('#second_step input[type=text]');
      var error = 0;
      fields.each(function(){
          var value = $(this).val();
          if( value.length&lt;1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' &amp;&amp; !emailPattern.test(value) )  ) {
              $(this).addClass('error');
              $(this).effect("shake", { times:3 }, 50);
  
              error++;
          } else {
              $(this).addClass('valid');
          }
          if( value.length&lt;1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='phone' &amp;&amp; !phonePattern.test(value) )  ) {
              $(this).addClass('error');
              $(this).effect("shake", { times:3 }, 50);
  
              error++;
          } else {
              $(this).addClass('valid');
          }
  
  
  
   });
   $('#submit_second').click(function(){
  
      url =$("input#url").val();
          yourname =$("input#yourname").val();
          email =$("input#email").val();
          phone =$("input#phone").val();
  
          //send information to server
          var dataString = 'url='+ url + '&amp;yourname=' + yourname + '&amp;email=' + email + '&amp;phone=' + phone;  
  
          //alert (dataString);
          $.ajax({  
              type: "POST",  
              url: "#",  
              data: "url="+url+"&amp;yourname="+yourname+"&amp;email="+email+'&amp;phone=' + phone,
              cache: false,
              success: function(data) {  
                  console.log("form submitted");
                  alert(dataString);
              }
          });  
      return false;
  
  });
  </code></pre>