title: Search if element does not have class
body: <p>I've looked through a bunch of posts and haven't found a solution that seems to work... getting kinda frustrated at this point, so I figured I'd see if someone else had a solution.</p>
  
  <p>So, I'm trying to validate a field with the attribute "required" on a widget I'm creating, the problem being that when the user clicks the "create" button, it creates a new visible section and also duplicates it in a hidden section with the class "hide" for various reasons.</p>
  
  <p>My validation code looks like this:</p>
  
  <pre><code>var $required = $("input[required]").css('border', '1px solid #CCC');
      $invalid = $required.filter(function(){
          return !this.value;
      }).css('border', '1px solid red');
  
  if($invalid.length){
      alert('Please fill in all required fields');
  } else {
      //ajax call
  }
  </code></pre>
  
  <p>This works just fine on all my other widgets, but since there is a hidden duplicate in this new widget, it passes on the visible fields but fails on the hidden fields.</p>
  
  <p>My solution was to add a second part to "if" statement to search for whether invalid has a length AND if its parent element <strong><em>doesn't</em></strong> have the class "hide". However, changing the statement to the following doesn't seem to work:</p>
  
  <pre><code>if( $invalid.length &amp;&amp; !$("input[required]").closest("li").hasClass("hide") ){
      alert('Please fill in all required fields');
  } else {
      //ajax call
  }
  </code></pre>
  
  <p>It seems to pass every time now...</p>
  
  <p>The (general) structure of the element I'm trying to validate is - I removed most of the code, just to simplify it for viewing:</p>
  
  <pre><code>&lt;li&gt;
      &lt;div class="row-fluid&gt;
          &lt;div class="span3"&gt;
              &lt;!-- Some content --&gt;
          &lt;/div&gt;
          &lt;div class="span9"&gt;
              &lt;input type="text" required /&gt;
              &lt;input type="text" /&gt;
              &lt;input type="text" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>The hidden element follows the same structure, just it has</p>
  
  <pre><code>&lt;li class="hide"&gt;
  </code></pre>
  
  <p>as the parent element, instead.</p>
  
  <p><em>I assume there's something wrong in the syntax of my jQuery, but I've been trying to fix this issue for so long now that I'm probably just overlooking something super simple...</em></p>
  
  <p>Thoughts? ;)</p>