重置 HTML5 无效输入状态

经过验证的输入最初不会被标记为无效，直到值发生更改。如何恢复这个初始状态？

我的问题的详细信息：我有一个简单的订单。如果用户单击“添加项目”按钮，我将克隆第一个项目并清空输入字段。但由于我使用的是 html5 验证，清空会使它们无效。

这是单击“添加产品”后发生的情况，即使第一组字段有效：

Demo: http://jsfiddle.net/WEHdp/ http://jsfiddle.net/WEHdp/（在火狐浏览器中查看）：

<form action="/orders/preview" method="post">
  <div class="orderData">
    <input name="order[order_items_attributes][0][articleno]" pattern="[0-9]{4}" required /> /
    <input name="order[order_items_attributes][0][colorno]" pattern="[0-9]{3}" required />
    <div>
      <a href="#" class="removeOrder">Remove product</a>
      <a href="#" class="addOrder">Add product</a>
    </div>
  </div>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script>
$(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() > 1){
      $(this).parents('.orderData').remove();
    }
  });
});
</script>

克隆页面就绪的行，然后您将始终拥有对该行默认状态的引用。

Like so:

$(document).ready(function() {
  var firstCopy = $('.orderData:first').clone();
  $(".addOrder").live("click", function (event) {
    event.preventDefault();

    // Clone div
    firstCopy.clone().insertAfter(".orderData:last");
    // Empty the fields
    $('.orderData:last input').val("");
  });

  $(".removeOrder").live("click", function (event) {
    event.preventDefault();
    if($('.orderData').size() > 1){
      $(this).parents('.orderData').remove();
    }
  });
});