title: Manually trigger html5 validation on button click
body: <p>I am trying to handle form validation on button click.  It is validating the form but not showing error.
  can anyone help me in this?</p>
  
  <pre><code>&lt;form id="the-form" action="#"&gt;
      &lt;input type="text" required="required" placeholder="Required text" /&gt;
      &lt;input type="email" required="required" placeholder="email" /&gt;
      &lt;button id="btn" type="button"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>$("#btn").on("click", function(){
      if($("#the-form")[0].checkValidity())
      {
          alert('validated');
      }
      else
      {
          //show errors
          return false;
      }
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/5ycZz/" rel="noreferrer">http://jsfiddle.net/5ycZz/</a></p>