title: How to use invalidHandler option in jQuery validation plugin to add CSS class to invalid input's parent?
body: <p>I'm using jQuery validation plugin to validate my form. I'm trying to add some styling to parent div if input has class error.</p>
  
  <p>I looked <a href="http://docs.jquery.com/Plugins/Validation/validate" rel="nofollow">here</a> and found the <code>invalidHandler</code> option, but when I tried to overwrite it validation stopped working at all.</p>
  
  <p>Here is my js code:</p>
  
  <pre><code>$(".sign_up").validate({
      invalidHandler: function(form, validator) {
          if (errors) {
              $("errorContainer").show();
              $(':input').each(function() {
                  if ($(this).hasClass('error')) {
                      $(this).parent().addClass('bg2');
                  }
              });
  
          }
          else {
              $("errorContainer").hide();
              $(':input').each(function() {
                  $(this).parent().removeClass('bg2');
              })
          };
      },
      rules: {
  
          "user[email]": {
              required: true,
              email: true,
              remote: {
                  type: "get",
                  dataType: "json",
                  url: url_name.concat("checkemail"),
                  async: false
              },
          },
          'user[password]': {
              required: true,
              minlength: 6
          },
          'user[password_confirmation]': {
              equalTo: "#passs",
              minlength: 6,
              required: true
          }
      },
      messages: {
          "user[email]": {
              remote: "This email is already taken"
          },
          'user[password]': {
              required: "Password is required",
              minlength: "Your password is too short"
          },
          'user[password_confirmation]': {
              equalTo: "Your password confirmation doesn't match",
              required: "Enter password confirmation"
          }
  
      },
      onsubmit: true,
      onkeydown: true,
      onkeyup: false,
      onfocusin: false,
      onfocusout: false,
      errorContainer: "#messageBox2",
      errorLabelContainer: "#messageBox2 ul",
      wrapper: "li"
  })
  </code></pre>
  
  <p>My HTML form:</p>
  
  <pre><code>  &lt;form accept-charset="UTF-8" action="/users/sign_in" class="login" id="login" method="post" novalidate="novalidate"&gt;&lt;div style="margin:0;padding:0;display:inline"&gt;&lt;input name="utf8" type="hidden" value="✓"&gt;&lt;/div&gt;
    &lt;div id="messageBox1"&gt; 
    &lt;ul&gt;&lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="field2"&gt;
    &lt;label for="user_email"&gt;E-mail Adress&lt;/label&gt;
    &lt;input id="em" name="user[email]" size="30" type="email" value=""&gt;
  &lt;/div&gt;
  
  &lt;div class="field2"&gt;
    &lt;label for="user_password"&gt;Password&lt;/label&gt;
    &lt;input class="passwords" id="user_password" name="user[password]" size="30" type="password"&gt;
  &lt;/div&gt;
  
   &lt;div class="submit_login"&gt;
    &lt;input class="btn go" id="check_login" name="commit" type="submit" value="Sign In"&gt;  
     &lt;/form&gt;
  </code></pre>
  
  <p>Next code( the same from invalidHandler) is working, but it is adding only on SECOND click</p>
  
  <pre><code>$("#submit").click(function(){
      $(':input').each(function() {
          if ($(this).hasClass('error')) {
              $(this).parent().addClass('bg2');
          }
      });
  })
  </code></pre>
  
  <p>What I'm doing wrong ?</p>