title: Jquery, how to know when input have a :invalid selector?
body: <p>I have this code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;input type="text" data-value="1" data-type="input-records" placeholder="Value" pattern="\d{1,4}$" /&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>input[type=text]:invalid { background-color: red; }
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$("[data-type=input-records]").die().live("keypress", function (e) {
      if (!($(this).val().length + 1) &lt; 5) {
          e.preventDefault();
          return;
      }
  
      // More code below...
  });
  </code></pre>
  
  <p>I want to make a validation like this:</p>
  
  <pre><code>if (!$(this).hasSelector(":invalid")) {
      showMessage("Invalid value");
  }
  </code></pre>