title: For Validation is it possible to use pattern attribute on key press Event
body: <p>Here is my code : <a href="http://codepen.io/dannibla/pen/NbdaPQ" rel="nofollow noreferrer">Codepen</a></p>
  
  <p>Without any script, Validation Error message show on Form submit </p>
  
  <pre><code>&lt;form&gt;
    &lt;input type="text" name="text1" placeholder="min-8, max-16, a-z, A-Z" pattern="^[a-zA-Z]{8,16}$" required&gt;
    &lt;input type="submit"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Can we able to show Validation Error message <strong>on key press</strong> with small script <strong>before form submit</strong>....</p>
  
  <p>So for i have tried this, but no use</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;form&gt; 
    &lt;input type="text" name="text2" class="numberValid" placeholder="min-4, max-4, 0-9" pattern="^[0-9]{4}$" required&gt;
    &lt;input type="submit"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>SCRIPT</p>
  
  <pre><code>$('.numberValid').on('keypress', function () {
      this.setCustomValidity('');
   });
  </code></pre>
  
  <p>Thanks in advance</p>