Resetowanie niewłaściwego stanu wejściowego HTML5

Question

Dane wejściowe z walidacją początkowo nie są oznaczone jako niepoprawne do czasu zmiany wartości. Jak przywrócić ten stan początkowy?

Mój problem w szczegółach: Mam prosty formularz zamówienia. Jeśli użytkownik kliknie przycisk "dodaj element", sklonuję pierwszy element i opróżnię pola wejściowe. Ale ponieważ używam sprawdzania html5, opróżnianie czyni je nieważnymi.

To co się dzieje po kliknięciu "Dodaj produkt", nawet jeśli pierwszy zestaw pól jest ważny:

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

Klonuj wiersz na stronie gotowy, wtedy zawsze będziesz miał odniesienie do wiersza w jego domyślnym stanie.

tak:

$(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 walidacja zaznacza pole za nieważne, ponieważ masz atrybut required na nich. Usuń to i oznaczenie, gdy pole będzie puste. Wynika to z tego, że puste stany są ważne dla pól nie wymaganych, a to powoduje, że żądane pola są nieważne (stąd oznaczenie).

Bez hackowania. Po prostu logika :)