Đặt lại trạng thái đầu vào không hợp lệ HTML5

Question

Các đầu vào có xác thực ban đầu không được đánh dấu là không hợp lệ cho đến khi giá trị thay đổi. Làm cách nào để khôi phục trạng thái ban đầu này?

Vấn đề của tôi một cách chi tiết: Tôi có một mẫu đơn đặt hàng đơn giản. Nếu người dùng nhấp vào nút "thêm mục", tôi sao chép mục đầu tiên và làm trống các trường nhập. Nhưng kể từ khi tôi đang sử dụng xác nhận html5, việc làm trống làm cho chúng không hợp lệ.

Đây là những gì xảy ra sau khi nhấp vào "Add Product", ngay cả khi tập đầu tiên của lĩnh vực có giá trị:

Demo: http://jsfiddle.net/WEHdp/ (xem trong 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

Sao chép hàng trên trang sẵn sàng, sau đó bạn sẽ luôn có một tham chiếu đến hàng ở trạng thái mặc định của nó.

Giống như vậy:

$(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 xác nhận đánh dấu lĩnh vực này là không hợp lệ bởi vì bạn có một thuộc tính required trên chúng. Dải đó và dấu sẽ biến mất khi trường trống. Điều này là do các trạng thái rỗng là hợp lệ đối với các trường không bắt buộc, trong khi nó làm cho các trường reqiured không hợp lệ (do đó đánh dấu).

Không cần hack. Chỉ cần logic :)