title: Why does my form submit and ignore validation?
body: <p>I am trying to figure out why <a href="https://jqueryvalidation.org/documentation/" rel="nofollow">jquery validation</a> does not stop my form from being submitted? When the submit button is pressed the form posts correctly but seems to ignore the validation error (This field is required) even if the input field is left blank.</p>
  
  <p>The form</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $("#message").hide();
  
    //Define your validation rules.
    $(function() {
      $("#myform").validate({
  
      });
      $("#submitButtonId").on("click", function(e) {
        var formdata = $("#myform").serialize();
        //Post form data
        $.post('php_includes/simple_insert.php', formdata, function(data) {
          //Process post response
          $("#message").html(data);
          $("#message").fadeIn(500);
          $("#message").fadeOut(500);
        });
  
        //Reset Form
        $('#myform')[0].reset();
      });
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"&gt;&lt;/script&gt;
  
  &lt;form class="form-inline" action="" id="myform" method="post"&gt;
  
    &lt;!-- Text input--&gt;
    &lt;div class="form-group"&gt;
      &lt;label class="col-md-4 control-label" for="bill_cost"&gt;&lt;/label&gt;
      &lt;div class="col-md-8"&gt;
        &lt;input id="bill_cost" name="bill_cost" type="text" placeholder="Bill Cost" class="form-control input-lg" required&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Button --&gt;
    &lt;div class="form-group"&gt;
      &lt;label class="col-md-4 control-label" for="submit1"&gt;&lt;/label&gt;
      &lt;div class="col-md-4"&gt;
        &lt;button type="submit" id="submitButtonId" name="submit1" class="btn btn-primary btn-xl"&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>