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

Answer 2

Html 5验证将该字段标记为无效，因为您有一个required属性。 剥离该字段，当字段为空时标记将消失。这是因为空状态对非必填字段有效，而它使得reqiured字段无效（因此标记）。

不需要黑客攻击。只是逻辑:)）