title: jQuery validate not working properly
body: <p>I need this validation to fire when the div button is clicked.  If the validation is successful, I want it to alert "is good".  </p>
  
  <p>Unfortunately, although validation fires and all rules are checked, it does not error if a required field is blank.  It will error for any of the other checks tho.  </p>
  
  <p>Finally, if I fill in the fields correctly and click the button, nothing happens.  </p>
  
  <p>JS: </p>
  
  <pre><code>$(document).ready(function() {
  
  // Submit prompted password reset
  $("#passwordResetButton").click(function() {
  
      $("#passwordResetForm").validate({  
          rules: {
              password: { required: true, minlength: 8, maxlength: 40, remote: { url: "/ajax/isPasswordOK", data: { product: function() { return $("#password").val();  } } } },
              confirmPassword: { required: true, equalTo: "#password" },
          }, 
          messages: { 
              password: { required: "Please enter a password", minlength: "Password must be at least 8 characters long", remote: "Password should contain: &lt;li&gt;At least one upper case character &lt;li&gt;At least one lower case character &lt;li&gt;At least one number &lt;li&gt;And may not contain any of the following: \\;-\")(&amp;*='|$" },
              confirmPassword: { required: "Please confirm your password", equalTo: "The passwords do not match" },
            }, 
          onkeyup: false, //turn off auto validate whilst typing
          onblur: true,
          afterValidation: function() {
              alert('is good');
          }
      });
  });
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form id="passwordResetForm" style="width: 480px; margin: auto;"&gt;
          &lt;div class="row"&gt;&lt;p class="lead"&gt;Let's reset that password&lt;/p&gt;&lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="small-8 large-4 columns"&gt;&lt;label&gt;New Password:&lt;/label&gt;&lt;/div&gt;
              &lt;div class="small-12 large-6 columns"&gt;&lt;input name="password" id="password" type="password" size="20"/&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="small-8 large-4 columns"&gt;&lt;label&gt;Confirm Password:&lt;/label&gt;&lt;/div&gt;
              &lt;div class="small-12 large-6 columns"&gt;&lt;input name="confirmPassword" id="confirmPassword" type="password" size="20"/&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="large-offset-10 small-3 large-1 columns"&gt;
                  &lt;div id="passwordResetButton"  class="small button"&gt;Submit&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>