title: setCustomValidity() html5 function is not working properly?
body: <p>i am using <code>setCustomValidity()</code> for adding custom error message for mobile number validation.its not working properly. if enter any invalid number or character it showing the error message as i specified,but after entering the valid information its not clearing the error message and stopping my ajax call.
   here is my html</p>
  
  <pre><code>&lt;div class="col-md-6"&gt;
      &lt;input type="tel" name="tel" pattern="[0-9]{10}" class="form-control input-lg" id="tel"  placeholder="Mobile" &gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>here is the script</p>
  
  <pre><code>$(document).ready(function(){
  
          //mobile number validation
  
          var input = document.getElementById('tel');
      input.oninvalid = function(event) {
  
          event.target.setCustomValidity('mobile number must contain 10 digits , alphabets &amp; specila characters are not allowd');
      }
          //ajax call to send mail
           $("#btn").click(function(){ 
  
                  $.ajax({      
                      url:"SendEmail",
                      data:"&amp;FirstName="+ $("#FirstName").val()+"&amp;LastName="+ $("#LastName").val()+"&amp;email="+ $("#email").val()+"&amp;tel="+ $("#tel").val()+"&amp;text="+ $("#text").val(),
                      dataType:"json",  
                      type:"get",  
                      success:function(response){    
                          console.log(response); 
  
                                                  }
  
  
               });
              });
      });
  </code></pre>
  
  <p>whats wrong with it?</p>