HTML5 유효하지 않은 입력 상태 재설정

Question

유효성 검사가있는 입력은 값이 변경 될 때까지 처음에는 유효하지 않은 것으로 표시되지 않습니다. 이 초기 상태를 어떻게 복원합니까?

내 문제 세부 사항 : 간단한 주문 양식이 있습니다. 사용자가 "항목 추가"버튼을 클릭하면 첫 번째 항목을 복제하고 입력 필드를 비 웁니다. 하지만 html5 유효성 검사를 사용하고 있으므로 비워두면 유효하지 않게됩니다.

이

은 필드의 첫 번째 세트가 유효하더라도, "제품 추가"를 클릭 한 후 발생하는 것입니다 :

데모 : http://jsfiddle.net/WEHdp/ (파이어 폭스에서보기) :

<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 속성을 가지고 있기 때문에 5 검증 필드가 유효하지 않은 것으로 표시

$(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로. 스트립이 표시되고 필드가 비어 있으면 표시가 사라집니다. 비어있는 상태는 필수 필드가 아닌 경우 유효한 반면, 필수 필드는 유효하지 않으므로 (따라서 마킹)이 때문입니다.

해킹이 필요 없습니다. 그냥 논리 :)