HTML5無効な入力状態をリセットする

Question

有効性のある入力は、値が変更されるまで、最初は無効とマークされません。この初期状態を復元するにはどうすればよいですか？

私の問題の詳細：私は単純な注文書を持っています。ユーザーが「項目を追加」ボタンをクリックすると、最初の項目をクローンし、入力項目を空にします。しかし、私は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> 

Answer 1

ページの準備が整ったら行をクローンすると、その行は常にデフォルトの状態で参照されます。

ようなので：あなたがそれらにrequired属性を持っているので、

$(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の検証は無効としてフィールドをマークします。 ストリップがあり、フィールドが空の場合はマーキングが消えます。これは、必須ではないフィールドに対しては空の状態が有効であり、必要なフィールドは無効になる（したがってマーキング）ためです。

ハッキングは不要です。ちょうど論理:)