title: checkvalidity always returns true for required field
body: <p>I have an input field and a button. When the button is clicked, I wanted to invoke HTML style field validation error message. Due to this reason, I wrapped up the input and the field in a form.</p>
  
  <pre><code>    &lt;form id="frmShippingHeader"&gt;
       &lt;input name="trailerNumber" id="trailerNumber" class="form-control fireChange" type="text"  aria-describedby="enter Part Number" placeholder="Trailer Number" required&gt;
       &lt;button class="btn btn-success" id="btnCreateShipping" onClick="createShippingOrder()"&gt;Create Shipping Order&lt;/button&gt;
     &lt;/form&gt;
  </code></pre>
  
  <p>Using my javascript I wanted to check if the form is valid or invalid. If the form is valid I will do prevent default and there is no need for error message. If the form is invalid howerver, I wanted to not do prevent default. However, even when I leave the input field empty and click the button the <code>blnFormValidity</code> returns true</p>
  
  <pre><code>$("#btnCreateShipping").click(function(e){
  
      blnFormValidity= $('#frmShippingHeader')[0].checkValidity()
      console.log(blnFromValidity)
  
      if(blnFormValidity==true){
          e.preventDefault();
          return false
      }
  
  })
  </code></pre>