title: Validator.element() triggers a stackoverflow error when validating inside a jquery ui accordion
body: <p>I have a form that's displayed in several parts by using a jquery ui accordion widget.  I'm trying to create validation feedback so that if one of the accordion tabs contains any input that is invalid, that tab is highlighted (as is the input field).  This is easy for most of my tabs because they only have one input field per tab.  I do have one tab, however, that has two input fields under it.  Here's the way that I'm trying to tackle that problem:</p>
  
  <pre><code>//validation rules for new story form   
  var storyValidator = $("form#new_story").bind("invalid-form.validate", function() {
              $("#story_create_warning").html("Your form contains " + storyValidator.numberOfInvalids() + " errors, see details below.");
          }).validate({
      ignore: [],  //so to perform validation on elements that have display:none
      errorClass: 'validationError',
      errorContainer: $("#story_create_warning"),
  
      highlight: function(element, errorClass) {
           $(element).addClass(errorClass);
           $(element).parents(".accord_contents").prev()
                     .addClass(errorClass);
      },
  
      unhighlight: function(element, errorClass) {
          $(element).removeClass(errorClass);
          //because the story_contents accordion tab has more than one input on which to validate, 
          //only remove that tabs highlighting if all elements under the tab are valid
          if ($(element).hasClass("story_contents")) {
              var contentsArray = $(".story_contents");
              var length = contentsArray.length;
              for (var i=0; i&lt;length; i++){
                  if (!storyValidator.element(contentsArray[i])) { //don't remove tab highlight if even one element in the tab doesn't validate
                      return
                  }
              }
          };
          $(element).parents(".accord_contents").prev()
                              .removeClass(errorClass);
      },
      errorElement: "em",
      rules: {
          "story[title]": {
              required: true,
              minlength: 5,
              maxlength: 49
          },
          "story[posts_attributes][0][contents]": {
              required: true,
              minlength: 5,
              maxlength: 399              
          },  
          "story[posts_attributes][0][photo]": {
              accept: "jpeg|jpg|png|gif|JPEG|JPG|PNG|GIF"             
          }
      },
      messages: { [my messaging]},
      errorPlacement: function(error, element) {
              error.insertAfter( element.parent("div") );
      }
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="new_story_form" class="removed" title="Create a New Story"&gt;
     &lt;form action="#" method="post" id="new_story" autocomplete="off"&gt;
       &lt;h4 id="story_create_warning" class="error" style="display:none;"&gt;&lt;/h4&gt;
  
      &lt;input type="hidden" name="story_centerpoint" id="hidden_story_location" /&gt;
      &lt;div id='story_create_accordion'&gt;
  
          &lt;h3 class="story_accord_tab"&gt;Step 1 - Story Title&lt;/h3&gt;
          &lt;div class="accord_contents"&gt;
              &lt;div class="field"&gt;
                  &lt;textarea id="story_title" class="story_title noScroll formWidthSmall" name="story[title]" placeholder="Insert a title for your story"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;h3 class="story_accord_tab"&gt;Step 2 - Story Contents&lt;/h3&gt;
          &lt;div class="accord_contents"&gt;
              &lt;div class="field"&gt;
                  &lt;textarea id="contents_of_story" class="story_contents post_contents noScroll formWidthSmall" name="story[posts_attributes][0][contents]" placeholder="Insert your news"&gt;&lt;/textarea&gt;
                  &lt;br/&gt;
                  &lt;label&gt;Add a photo&lt;/label&gt;
                  &lt;input id="story_photo" class="narrowInput story_contents" type="file" name="story[posts_attributes][0][photo]"/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;h3 class="story_accord_tab"&gt;Step 3 - Additional Options&lt;/h3&gt;
          &lt;div class="accord_contents"&gt;
              &lt;div class="field"&gt;
                  &lt;label&gt;Additional info:
                      &lt;textarea class="story_options" name="story[extra_info]"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt; &lt;a href="javascript:;" id="submit"&gt;submit&lt;/a&gt;
  </code></pre>
  
  <p>This works just fine on all of the elements that don't belong to the <code>story_contents</code> class.  I can also perform <code>storyValidator.element("#[enter element id]")</code> on those elements.  </p>
  
  <p>Things breakdown, however, with elements that belong to the <code>story_contents</code> class.  For those elements, If I insert a value that doesn't conform to my validation rules the <code>highlight</code> method triggers just fine. When I insert text that conforms to my rules the <code>unhighlight</code> method triggers, and then, after a several second delay, the browser crashes.  I tried setting a breakpoint in the middle of the <code>for</code> loop inside of the <code>unhighlight</code> method, and then use the console to execute <code>storyValidator.element("#contents_of_story")</code>.  The console returns the following error: <code>RangeError: Maximum call stack size exceeded</code>.  I'm having some sort of recursion problem, but I sure can't figure it out.  </p>
  
  <p>Here is the fiddle showing the problem: <a href="http://jsfiddle.net/3Td8C/4/" rel="nofollow" title="jsfiddle">jsfiddle</a>.  The browser doesn't crash when running the fiddle, but you can see the delay, and see that the unhighlight method doesn't remove the highlight as it should.</p>
  
  <p>Any help out there?</p>