title: Reset HTML5 invalid input state
body: <p>The inputs with a validation are initially not marked as invalid until the value changes. How do I restore this initial state?</p>
  
  <p>My problem in detail: I have a simple order form. If the user clicks the "add item" button, I clone the first item and empty the input fields. But since I'm using html5 validation, the emptying makes them invalid.</p>
  
  <p>This is what happens after clicking "Add Product", even if the first set of fields is valid:</p>
  
  <p><img src="https://i.stack.imgur.com/M1fSR.png" alt="enter image description here"></p>
  
  <p>Demo: <a href="http://jsfiddle.net/WEHdp/" rel="nofollow noreferrer">http://jsfiddle.net/WEHdp/</a> (view in Firefox):</p>
  
  <pre><code>&lt;form action="/orders/preview" method="post"&gt;
    &lt;div class="orderData"&gt;
      &lt;input name="order[order_items_attributes][0][articleno]" pattern="[0-9]{4}" required /&gt; /
      &lt;input name="order[order_items_attributes][0][colorno]" pattern="[0-9]{3}" required /&gt;
      &lt;div&gt;
        &lt;a href="#" class="removeOrder"&gt;Remove product&lt;/a&gt;
        &lt;a href="#" class="addOrder"&gt;Add product&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function() {
    $(".addOrder").live("click", function (event) {
      event.preventDefault();
  
      // Clone div
      $('.orderData:first').clone().insertAfter(".orderData:last");
      // Empty the fields
      $('.orderData:last input').val("");
    });
  
    $(".removeOrder").live("click", function (event) {
      event.preventDefault();
      if($('.orderData').size() &gt; 1){
        $(this).parents('.orderData').remove();
      }
    });
  });
  &lt;/script&gt;
  </code></pre>