title: jquery validate plugin can't access label in the success callback
body: <p>I have a form that i'm trying to use the jquery validate plugin. My problem is that i can't access the label in the success callback. I can get <code>label.attr('for')</code>, but when i try <code>label.attr('id')</code>, or <code>label.html()</code>, i get undefined.</p>
  
  <p>Here's my validate call:</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
              $('#personal_info').validate({
                  rules: {
                      LastName: "required",
                      Age: "required"
                  },
                  messages: {
                      LastName: "",
                      Age: ""
                  },
                  errorPlacement: function(error, element) {
                      console.log('element.attr = '+element.attr('name'));
                      if(element.attr('name') == 'Age') {
                              console.log('element = '+element.parents().siblings('label').html());
                              element.parents().siblings('label').removeClass('highlight').addClass('warning');
                      }                                       
                      //error.insertBefore(element.parent().children("br"));
                  },
  
                  // specifying a submitHandler prevents the default submit, good for the demo
                  submitHandler: function() {
                      document.personal_info.submit();
                  },
                  validClass: "checkmark",
                  // set this class to error-labels to indicate valid fields
                  success: function(label) {
                      console.log('the label for = '+label.attr('for'));
                      console.log('the label id = '+label.attr('id'));
                  }   
              });
          });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here's a piece of my html:</p>
  
  <pre><code>&lt;label for="Age" id="age18" class="highlight"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Are you at least 18 years of age?&lt;/label&gt;
         &lt;table id="OnlineAppWizard_InputAge18" border="0"&gt;
               &lt;tr&gt;
                   &lt;td&gt;
                       &lt;input id="Age18_yes" type="radio" name="Age" value="Yes"  &lt;?
                           if ($Age18 == "Yes") {
                                 print "checked";
                           }
                        ?&gt;/&gt;
                       &lt;label for="Age18_yes"&gt;Yes&lt;/label&gt;
                   &lt;/td&gt;
                   &lt;td&gt;
                       &lt;input id="Age18_no" type="radio" name="Age" value="No" &lt;?
                           if ($Age18 == "No") {
                                  print "checked";
                           } ?&gt;/&gt;
                       &lt;label for="Age18_no"&gt;No&lt;/label&gt;
                   &lt;/td&gt;
               &lt;/tr&gt;
           &lt;/table&gt;
  </code></pre>
  
  <p>When i click on one of the radio buttons, this is what appears in the firebug console:the </p>
  
  <pre><code>the label for = Age
  the label id = undefined
  </code></pre>
  
  <p>You can see from the html snippet that the label tag with the "for" attribute of "Age", also has an "id" attribute of "age18"</p>