jQuery मान्य सभी क्षेत्रों का मूल्यांकन नहीं कर रहा है

Question

मैं एक ऐसे पृष्ठ के लिए एक नए लेआउट पर काम कर रहा हूं जो क्लाइंट के लिए एक विज़ार्ड आधारित ऑर्डरिंग सिस्टम है। वे सामग्रियों के सेट ऑर्डर करते हैं लेकिन ऑर्डर प्रक्रिया के दौरान इन सामग्रियों को एक साथ समूहीकृत किया जा सकता है जैसे कि वे उदाहरण के लिए लाल, नीले, और/या हरे रंग के किसी भी संयोजन में 10 विजेट्स ऑर्डर कर सकते हैं। फ़ील्ड की कुल योग पूर्व-गणना अधिकतम से अधिक नहीं हो सकती है। अधिकांश सामग्री प्रति समूह एक साधारण एकल विकल्प हैं।

मैंने अन्य पृष्ठों में jQuery का सत्यापन किया है और मैंने पृष्ठ पर सभी इनपुट तत्वों को सत्यापित करने के लिए addClassRules विधि का उपयोग किया है और यह ठीक काम करता है। वर्तमान उदाहरण जो मैं काम कर रहा हूं वह मुझे परेशान कर रहा है क्योंकि यह केवल फॉर्म सबमिशन पर पहली सत्यापन विफलता को पकड़ता है लेकिन सबमिशन के बाद यह आमतौर पर दूसरों को पकड़ लेगा, लेकिन सत्यापन विफलताओं की पूरी सूची कभी नहीं।

यहाँ मेरी jsfiddle नमूना, ताकि आप देख सकते हैं कि मैं क्या एक साथ डाल रहा हूँ: http://jsfiddle.net/brianmat/2nV5u/

मैं एक त्रुटि गिनती टुकड़ा है कि कई साइटों पर एक समस्या के बिना काम किया है का उपयोग करें। इस उदाहरण में मुझे केवल 1 त्रुटि मिलती है भले ही सभी 7 टेक्स्ट बॉक्स खाली छोड़ दिए गए हों।

मेरा एकमात्र मुख्य अंतर यह है कि मैं अपने सामानों को समूहबद्ध करने के लिए एक पंक्तियां कर रहा हूं, लेकिन मैं नहीं देख सकता कि यह एक समस्या होगी। मुझे पता है कि यह कुछ सरल हो जाएगा, लेकिन मैं इस बिंदु पर बस उस पर एक दीवार मार रहा हूँ।

$.validator.addClassRules({ 
    NumericInput: { 
     required: true 
    } 
}); 

$("#theForm").validate({ 
    invalidHandler: function(e, validator) { 
     var errors = validator.numberOfInvalids(); 
     if (errors) { 
      var message = errors == 1 ? 'You missed 1 field. It has been highlighted below' : 'You missed ' + errors + ' fields. They have been highlighted below'; 
      $("div.error span").html(message); 
      $("div.error").show(); 
     } else { 
      $("div.error").hide(); 
     } 
    }, 
    errorPlacement: function(error, element) {}, 
    submitHandler: function(form) { 
     $("div.error").hide(); 
     form.submit(); 
    } 
}); 

शेष कोड बस subtotaling और संख्यात्मक केवल डेटा इनपुट के प्रबंधन:

jQuery मान्य कोड फैंसी कुछ नहीं है।

मैं इस समस्या को संभालने के लिए एक अलग दृष्टिकोण के लिए पूरी तरह से खुला हूं, इसलिए मेरे वर्तमान कोड को स्क्रैप करना और कुछ ठीक से काम करना कुछ समस्या नहीं है। मैं एक गोल छेद में एक स्क्वायर पेग फिट करने की कोशिश नहीं करता अगर मैं अंत में कर रहा हूं।

Answer 1

मत भूलना कि परेशान करने name विशेषता:

<input id="Text1" name="Text1" type="text" class="NumericInput group1" materialgroup="1" /> 
<!--    ^^ --> 

अपडेट किया गया उदाहरण:http://jsfiddle.net/2nV5u/6/

इसके अलावा, data-* (तत्वों के लिए अपने स्वयं के गुण जोड़ने के बजाय विशेषताओं का उपयोग करने पर विचार यानी data-materialgroupmaterialgroup के बजाय)।