title: jQuery: Prevent Form Submission on Button / Click Event
body: <p>I'm using the following script in order to ensure that a <code>&lt;select&gt;</code> field has a value applied to it (other than the default) when the form is submitted.</p>
  
  <pre><code>// form-submit
  $('#form-register form .button').click(function(e) {
    e.preventDefault();  // don't submit it
    var submitOK = true;
    $('#form-register').find("select").each(function() {
          if ($(this).val() == "Select Brand") {
                alert ('Please select an appliance and a brand');
                submitOK = false;
                return false;  // breaks out of the each
         }
    });
    if (submitOK) {
          $('#form-register form').submit();
    }
  });
  </code></pre>
  
  <p>I had to bind the function to the <code>click()</code> event on the button because having it on the form's <code>submit()</code> event resulted in a 'too much recursion' error in my browser.</p>
  
  <p>However now the problem I'm having is that the script can't seem to prevent the form from submitting, even if the validation error is alerted to the user.</p>
  
  <p>Does anyone know how I can modify it to prevent the submission of the form in the event of a validation error?</p>
  
  <p><strong>I'm starting to think the fact I'm using Gravity Forms for WordPress it might be making things difficult. If it helps, here is the markup for the submit button (which includes some jQuery):</strong></p>
  
  <pre><code>&lt;input type="button" onclick="jQuery(&amp;quot;#gform_target_page_number_1&amp;quot;).val(&amp;quot;2&amp;quot;); jQuery(&amp;quot;#gform_1&amp;quot;).trigger(&amp;quot;submit&amp;quot;,[true]); " tabindex="13" value="Register My Appliances" class="button gform_next_button" id="gform_next_button_1_14"&gt;
  </code></pre>