title: JQuery Validation Plugin - Cannot get resetForm to work
body: <p>Im using JQuery's Form Validation plugin and getting through it for the most part. However, my problem now is that I cannot get resetForm to work properly. I think that it might have something to do with where I am placing the variable declaration.</p>
  
  <p>Here is my Validation script (which is in a separate js file by the way:</p>
  
  <pre><code>var validator = $("popcornOrder");
  
      $(document).ready(function() {
          validator.validate({
                  rules: {
                      fName:      "required",
                      lName:      "required",
                      street:     "required",
                      city:       "required",
                      state:      {required: true, state: true},
                      zip:        {required: true, ziprange: true},
                      accountNum: "required",
                      email:      {required: true, email: true},
                      pwd:        "required",
                      confPwd:    {required: true, equalTo: "#pwd"},
                      payment:    "required"
                  },
                  messages: {
                      fName:      "Everyone has a first name, we need to know yours.",
                      lName:      "Unless you're a rockstar, we need your last name too.",
                      street:     "Street is required.",
                      city:       "City is a required field too.",
                      state:      {required: "State is required.", state: "You need to put in proper state abbreviation"},
                      zip:        {required: "Please enter an appropriate zip code", ziprange: "Not a valid format, please try again"},
                      accountNum: "You cannot order without entering an account number.",
                      email:      {required: "We need your email address", email: "That's not an email address"},
                      pwd:        "A password is required.",
                      confPwd:    {required: "You already entered it once, can you do it again?", equalTo: "Does not match"},
                      payment:    "Please enter a payment type."
  
                  },
                  highlight:
                      function(element) {
                          $(element).addClass('errorBorder');
                      },
                  unhighlight:
                      function(element) {
                          $(element).removeClass('errorBorder').prop("title", "");
                      },
                  invalidHandler: function(form, validator) {
                      var errors = validator.numberOfInvalids();
                          if (errors) {
                               var message = errors == 1
                                  ? 'You missed 1 field. It has been highlighted'
                                  : 'You missed ' + errors + ' fields. They have been highlighted. Hover mouse over input for specfic error info.';
                               $("div.error span").html(message);
                               $("div.error").show();
                               } else {
                              $("div.error").hide();
                          }
                   },
                   focusInvalid: false,
                   errorPlacement: function(error, element) {
                      $(element).prop("title", error.text());
                   }
          });
      });
  </code></pre>
  
  <p>Then, on the form HTML itself, I simply have the appropriate js files pulled in:</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery.form.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery.validate.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/mmiller.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Now, I have two buttons at the bottom, like so:</p>
  
  <pre><code>&lt;input type="image" name="submit" id="submit" src="img/submit-btn.jpg" width="74" height="77" /&gt;
          &lt;input type="image" name="clear" id="clear" src="img/clear-btn.jpg" width="119" height="77" onclick="validator.resetForm();" /&gt;
  </code></pre>
  
  <p>The problem is that before I added <code>var validator = $("popcornOrder");</code>, the submit button actually caused the validation to fire and the form to respond appropriately. (At this point I was just <code>$("popcornOrder").validate ({ rules: ...});</code></p>
  
  <p>Anyway, now that I actually create validator, the form gets cleared whether I click the Submit button or the Clear button. What gives?</p>