एचटीएमएल 5 अमान्य इनपुट स्थिति रीसेट करें

Question

सत्यापन के साथ इनपुट प्रारंभ में वैल्यू चेंज तक अमान्य के रूप में चिह्नित नहीं किए जाते हैं। मैं इस प्रारंभिक स्थिति को कैसे पुनर्स्थापित करूं?

मेरी समस्या विस्तार से: मेरे पास एक साधारण ऑर्डर फॉर्म है। यदि उपयोगकर्ता "आइटम जोड़ें" बटन पर क्लिक करता है, तो मैं पहले आइटम को क्लोन करता हूं और इनपुट फ़ील्ड खाली करता हूं। लेकिन चूंकि मैं एचटीएमएल 5 सत्यापन का उपयोग कर रहा हूं, खाली होने से उन्हें अमान्य बना दिया जाता है।

यह वही है "उत्पाद जोड़ें" पर क्लिक के बाद क्या होता है, भले ही क्षेत्रों का पहला सेट मान्य है:

डेमो: 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

पृष्ठ तैयार पंक्ति पर पंक्ति को क्लोन करें, फिर आपके पास हमेशा इसकी डिफ़ॉल्ट स्थिति में पंक्ति का संदर्भ होगा।

तो जैसा :

$(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

एचटीएमएल 5 सत्यापन के निशान क्षेत्र के रूप में अवैध है क्योंकि आप उन पर एक required विशेषता है। फ़ील्ड खाली होने पर स्ट्रिप और मार्किंग गायब हो जाएगी। ऐसा इसलिए है क्योंकि खाली राज्य गैर-आवश्यक फ़ील्ड के लिए मान्य हैं, जबकि यह रिक्त फ़ील्ड को अमान्य (इसलिए अंकन) प्रदान करता है।

हैक्स की कोई आवश्यकता नहीं है। बस तर्क :)