title: Stop form refreshing page on submit
body: <p>How would I go about preventing the page from refreshing when pressing the send button without any data in the fields?</p>
  
  <p>The validation is setup working fine, all fields go red but then the page is immediately refreshed. My knowledge of JS is relatively basic.</p>
  
  <p>In particular I think the <code>processForm()</code> function at the bottom is 'bad'.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form id="prospects_form" method="post"&gt;
      &lt;input id="form_name" tabindex="1" class="boxsize" type="text" name="name" placeholder="Full name*" maxlength="80" value="" /&gt;
      &lt;input id="form_email" tabindex="2" class="boxsize" type="text" name="email" placeholder="Email*" maxlength="100" value="" /&gt;
      &lt;input id="form_subject" class="boxsize" type="text" name="subject" placeholder="Subject*" maxlength="50" value="FORM: Row for OUBC" /&gt;
      &lt;textarea id="form_message" class="boxsize" name="message" placeholder="Message*" tabindex="3" rows="6" cols="5" maxlength="500"&gt;&lt;/textarea&gt;
  
      &lt;button id="form_send" tabindex="5" class="btn" type="submit" onclick="return processForm()"&gt;Send&lt;/button&gt;
      &lt;div id="form_validation"&gt;
          &lt;span class="form_captcha_code"&gt;&lt;/span&gt;
          &lt;input id="form_captcha" class="boxsize" type="text" name="form_captcha" placeholder="Enter code" tabindex="4" value="" /&gt;
      &lt;/div&gt;
      &lt;div class="clearfix"&gt;&lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(document).ready(function() { 
  
  // Add active class to inputs
  $("#prospects_form .boxsize").focus(function() { $(this).addClass("hasText"); });
  $("#form_validation .boxsize").focus(function() { $(this).parent().addClass("hasText"); });
  // Remove active class from inputs (if empty)
  $("#prospects_form .boxsize").blur(function() { if ( this.value === "") { $(this).removeClass("hasText"); } });
  $("#form_validation .boxsize").blur(function() { if ( this.value === "") { $(this).parent().removeClass("hasText"); } });
  
  
  
  ///////////////////
  // START VALIDATION
  $("#prospects_form").ready(function() {
  
      // DEFINE GLOBAL VARIABLES
      var valName = $('#form_name'),
          valEmail = $("#form_email"),
          valEmailFormat = /^(([^&lt;&gt;()[\]\\.,;:\s@\"]+(\.[^&lt;&gt;()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
          valMsg = $('#form_message'),
          valCaptcha = $('#form_captcha'),
          valCaptchaCode = $('.form_captcha_code');
  
  
  
      // Generate captcha
      function randomgen() {
          var rannumber = "";
          // Iterate through 1 to 9, 4 times
          for(ranNum=1; ranNum&lt;=4; ranNum++){ rannumber+=Math.floor(Math.random()*10).toString(); }
          // Apply captcha to element
          valCaptchaCode.html(rannumber);
      }
      randomgen();
  
  
      // CAPTCHA VALIDATION
      valCaptcha.blur(function() {
          function formCaptcha() {
              if ( valCaptcha.val() == valCaptchaCode.html() ) {
                  // Incorrect
                  valCaptcha.parent().addClass("invalid");
                  return false;
              } else {
                  // Correct
                  valCaptcha.parent().removeClass("invalid");
                  return true;
              }
          }
          formCaptcha();
      });
  
      // Remove invalid class from captcha if typing
      valCaptcha.keypress(function() {
          valCaptcha.parent().removeClass("invalid");
      });
  
  
      // EMAIL VALIDATION (BLUR)
      valEmail.blur(function() {
          function formEmail() {
              if (!valEmailFormat.test(valEmail.val()) &amp;&amp; valEmail.val() !== "" ) {
                  // Incorrect
                  valEmail.addClass("invalid");
              } else {
                  // Correct
                  valEmail.removeClass("invalid");
              }
          }
          formEmail();
      });
  
      // Remove invalid class from email if typing
      valEmail.keypress(function() {
          valEmail.removeClass("invalid");
      });
  
  
      // VALIDATION ON SUBMIT
      $('#prospects_form').submit(function() {
          console.log('user hit send button');
  
          // EMAIL VALIDATION (SUBMIT)
          function formEmailSubmit() {
              if (!valEmailFormat.test(valEmail.val())) {
                  // Incorrect
                  valEmail.addClass("invalid");
              } else {
                  // Correct
                  valEmail.removeClass("invalid");
              }
          }
          formEmailSubmit();
  
          // Validate captcha
          function formCaptchaSubmit() {
              if( valCaptcha.val() === valCaptchaCode.html() ) {
                  // Captcha is correct
              } else {
                  // Captcha is incorrect
                  valCaptcha.parent().addClass("invalid");
                  randomgen();
              }
          }
          formCaptchaSubmit();
  
  
          // If NAME field is empty
          function formNameSubmit() {
              if ( valName.val() === "" ) {
                  // Name is empty
                  valName.addClass("invalid");
              } else {
                  valName.removeClass("invalid");
              }
          }
          formNameSubmit();
  
  
          // If MESSAGE field is empty
          function formMessageSubmit() {
              if ( valMsg.val() === "" ) {
                  // Name is empty
                  valMsg.addClass("invalid");
              } else {
                  valMsg.removeClass("invalid");
              }
          }
          formMessageSubmit();
  
  
          // Submit form (if all good)
          function processForm() {
              if ( formEmailSubmit() &amp;&amp; formCaptchaSubmit() &amp;&amp; formNameSubmit() &amp;&amp; formMessageSubmit() ) {
                  $("#prospects_form").attr("action", "/clients/oubc/row-for-oubc-send.php");
                  $("#form_send").attr("type", "submit");
                  return true;
              } else if( !formEmailSubmit() ) {
                  valEmail.addClass("invalid");
                  return false;
              } else if ( !formCaptchaSubmit() ) {
                  valCaptcha.parent().addClass("invalid");
                  return false;
              } else if ( !formNameSubmit() ) {
                  valName.addClass("invalid");
                      return false;
                  } else if ( !formMessageSubmit() ) {
                      valMsg.addClass("invalid");
                      return false;
                  } else {
                      return false;
                  }
              }
          });
      });
      // END VALIDATION
      /////////////////
  });
  </code></pre>