Ripristina stato input non valido HTML5

Question

Gli input con una convalida inizialmente non sono contrassegnati come non validi finché il valore non cambia. Come posso ripristinare questo stato iniziale?

Il mio problema in dettaglio: ho un semplice modulo d'ordine. Se l'utente fa clic sul pulsante "aggiungi elemento", clonato il primo elemento e svuoto i campi di input. Ma dal momento che sto usando la convalida html5, lo svuotamento li rende non validi.

Questo è ciò che accade dopo aver fatto clic su "Aggiungi prodotto", anche se la prima serie di campi è valido:

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

Clona la riga sulla pagina pronta, quindi avrai sempre un riferimento alla riga nel suo stato predefinito.

Come così:

$(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 convalida contrassegna il campo come non valido perché si ha un attributo required su di loro. Striscia e il segno scompare quando il campo è vuoto. Questo perché gli stati vuoti sono validi per i campi non obbligatori, mentre rende non validi i campi reqiured (da qui il contrassegno).

Non c'è bisogno di hack. Semplicemente logico :)