title: Form submitting before jQuery validation is checked on submit
body: <p>I am using Ajax and jQuery to validate and submit the information from my form. The issue I am having is that when I click the submit button the form submits the information to the server straight away before performing the validation checks and displaying the errors?</p>
  
  <p>I'm not sure what the issue is here so any input would be great!</p>
  
  <p>Cheers</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');
          }
  
      });
  
      if(!error) {
          //update progress bar
          $('#progress_text').html('66% Complete');
          $('#progress').css('width','226px');
  
          //slide steps
          $('#second_step').slideUp();
          $('#fourth_step').slideDown();     
      } else return false;
  });
  
  $('#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("success");
          }
      });  
      return false;
  });
  </code></pre>