title: How to reset validation after the form is submitted with AJAX?
body: <p>I have a form validated with html5 validation then submitted with AJAX, then the inputs fields are reset, it's working. </p>
  
  <p>My problem is that after a valid submission, message was sent, inputs are cleared, but the html5 validation still outlines my empty fields as incorrect fields.</p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;form method="post" action="mailer.php" class="contact-form" id="cform"&gt;
       &lt;input type="text" name="name" placeholder="Name" required /&gt;
       &lt;input type="text" name="phone"  placeholder="Phone" required /&gt;                       
       &lt;input type="email" name="email" placeholder="Email" required /&gt;                       
       &lt;textarea name="message" placeholder="Message" required&gt;&lt;/textarea&gt;
       &lt;input type="submit" class="submit-btn" id="submit-btn" value="Send your message" /&gt;
       &lt;div id="success"&gt;&lt;/div&gt;
   &lt;/form&gt;
  </code></pre>
  
  <p>JQUERY:</p>
  
  <pre><code> $('#submit-btn').click(function(){
       if($("#cform")[0].checkValidity()) {
  
           $.post("mailer.php", $("#cform").serialize(),  function(response) {
               $('#success').html(response);
               $("#cform")[0].reset();
           });
           return false;
  
       } else console.log("invalid form");
   });
  </code></pre>