Restablecer el estado de entrada no válida HTML5

Question

Las entradas con una validación inicialmente no se marcan como inválidas hasta que el valor cambie. ¿Cómo restauro este estado inicial?

Mi problema en los detalles: Tengo un formulario de pedido simple. Si el usuario hace clic en el botón "agregar elemento", clono el primer elemento y vacía los campos de entrada. Pero dado que estoy usando la validación html5, el vaciado los hace inválidos.

Esto es lo que sucede después de hacer clic en "Añadir producto", incluso si el primer conjunto de campos es válido:

Demostración: http://jsfiddle.net/WEHdp/ (vista en 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

Clone la fila en la página lista, entonces siempre tendrá una referencia a la fila en su estado predeterminado.

así:

$(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 validación marca el campo como no válido porque tiene un atributo required en ellos. Elimine eso y la marca desaparecerá cuando el campo esté vacío. Esto se debe a que los estados vacíos son válidos para campos no requeridos, a la vez que invalidan los campos requeridos (de ahí el marcado).

No hay necesidad de hacks. Simplemente lógica :)