Stop form refreshing page on submit

Question

How would I go about preventing the page from refreshing when pressing the send button without any data in the fields?

The validation is setup working fine, all fields go red but then the page is immediately refreshed. My knowledge of JS is relatively basic.

In particular I think the processForm() function at the bottom is 'bad'.

HTML

<form id="prospects_form" method="post">     <input id="form_name" tabindex="1" class="boxsize" type="text" name="name" placeholder="Full name*" maxlength="80" value="" />     <input id="form_email" tabindex="2" class="boxsize" type="text" name="email" placeholder="Email*" maxlength="100" value="" />     <input id="form_subject" class="boxsize" type="text" name="subject" placeholder="Subject*" maxlength="50" value="FORM: Row for OUBC" />     <textarea id="form_message" class="boxsize" name="message" placeholder="Message*" tabindex="3" rows="6" cols="5" maxlength="500"></textarea>      <button id="form_send" tabindex="5" class="btn" type="submit" onclick="return processForm()">Send</button>     <div id="form_validation">         <span class="form_captcha_code"></span>         <input id="form_captcha" class="boxsize" type="text" name="form_captcha" placeholder="Enter code" tabindex="4" value="" />     </div>     <div class="clearfix"></div> </form> 

JS

$(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 = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\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<=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()) && 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() && formCaptchaSubmit() && formNameSubmit() && 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     ///////////////// }); 

Answer 1

You can prevent the form from submitting with

$("#prospects_form").submit(function(e) {     e.preventDefault(); }); 

Of course, in the function, you can check for empty fields, and if anything doesn't look right, e.preventDefault() will stop the submit.

Without jQuery:

var form = document.getElementById("myForm"); function handleForm(event) { event.preventDefault(); }  form.addEventListener('submit', handleForm);