带有验证的输入框在值发生改变之前不会被标记为无效。我该如何恢复初始状态?
我的问题详细描述如下:我有一个简单的订单表单。如果用户点击“添加商品”按钮,我会克隆第一个商品并清空输入框。但由于我使用了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>