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

- iGEL

---

您可以请发一下相关的代码吗？ - defau1t

你所说的“使它们无效”具体指什么？直到点击提交按钮之前，你不会在“必填字段消息”中收到提示，对吗？ - Bart

Firefox和Chrome会在无效的文本框上添加一个box-shadow（我不想改变这个）。只需将上面的演示保存在html文件中，然后在浏览器中打开即可看到问题。 - iGEL

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

- Josiah Ruddell

---

聪明的想法，我认为HTML5浏览器UI状态通常是非常困难甚至无法更改的。 - Wesley Murch

Answer 2

HTML5验证会将带有required属性的字段标记为无效。 去掉这个属性，当字段为空时，无效标记将消失。这是因为对于非必填字段，空状态是有效的，而它使得必填字段无效（因此出现了标记）。

不需要使用黑科技，只需要逻辑 :)

- Tokimon