重置HTML5无效的输入状态

Question

在值发生变化之前,带有验证的输入最初不会被标记为无效.如何恢复此初始状态？

我的问题很详细:我有一个简单的订单.如果用户单击"添加项目"按钮,我将克隆第一个项目并清空输入字段.但由于我正在使用html5验证,因此清空会使它们无效.

即使第一组字段有效,单击"添加产品"后会发生这种情况:

演示:http://jsfiddle.net/WEHdp/(在Firefox中查看):

<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>

Answer 1

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

就像这样：

$(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();
    }
  });
});