मैं कुछ रूपों को मान्य करने के लिए उत्कृष्ट jQuery के मान्य प्लगइन का उपयोग कर रहा हूं । एक रूप में, मुझे यह सुनिश्चित करने की आवश्यकता है कि उपयोगकर्ता फ़ील्ड के कम से कम एक समूह में भरता है। मुझे लगता है कि मुझे बहुत अच्छा समाधान मिला है, और मैं इसे साझा करना चाहता हूं। कृपया कोई सुधार बताएं जो आप सोच सकते हैं।
ऐसा करने के लिए कोई अंतर्निहित तरीका नहीं खोजा, मैंने रेबेका मुरफे की कस्टम सत्यापन विधि की खोज की और पाया , जो बहुत मददगार था।
मैंने इसे तीन तरीकों से सुधारा:
- आपको खेतों के समूह के लिए एक चयनकर्ता में पास होने के लिए
- आपको यह बताने के लिए कि सत्यापन के लिए उस समूह में से कितने को भरना होगा
- समूह में सभी इनपुट दिखाने के लिए जैसे ही उनमें से एक सत्यापन पास होता है। ( अंत में निक क्रेवर के लिए चिल्लाओ-आउट देखें ।)
तो आप कह सकते हैं "कम से कम एक्स इनपुट जो कि चयनकर्ता वाई से मेल खाते हैं उन्हें भरना चाहिए।"
अंतिम परिणाम, इस तरह मार्कअप के साथ:
<input class="productinfo" name="partnumber">
<input class="productinfo" name="description">
... इस तरह से नियमों का एक समूह है:
// Both these inputs input will validate if
// at least 1 input with class 'productinfo' is filled
partnumber: {
require_from_group: [1,".productinfo"]
}
description: {
require_from_group: [1,".productinfo"]
}
आइटम # 3 मानता है कि आप .checkedसफल सत्यापन पर अपनी त्रुटि संदेशों का एक वर्ग जोड़ रहे हैं । आप इसे निम्नानुसार कर सकते हैं, जैसा कि यहां दिखाया गया है ।
success: function(label) {
label.html(" ").addClass("checked");
}
जैसा कि ऊपर लिंक किए गए डेमो में, मैं प्रत्येक पृष्ठ span.errorको अपनी पृष्ठभूमि के रूप में एक एक्स छवि देने के लिए सीएसएस का उपयोग करता हूं , जब तक कि इसमें वर्ग न हो .checked, जिस स्थिति में इसे चेक मार्क छवि मिलती है।
यहाँ मेरा कोड अब तक है:
jQuery.validator.addMethod("require_from_group", function(value, element, options) {
var numberRequired = options[0];
var selector = options[1];
//Look for our selector within the parent form
var validOrNot = $(selector, element.form).filter(function() {
// Each field is kept if it has a value
return $(this).val();
// Set to true if there are enough, else to false
}).length >= numberRequired;
// The elegent part - this element needs to check the others that match the
// selector, but we don't want to set off a feedback loop where each element
// has to check each other element. It would be like:
// Element 1: "I might be valid if you're valid. Are you?"
// Element 2: "Let's see. I might be valid if YOU'RE valid. Are you?"
// Element 1: "Let's see. I might be valid if YOU'RE valid. Are you?"
// ...etc, until we get a "too much recursion" error.
//
// So instead we
// 1) Flag all matching elements as 'currently being validated'
// using jQuery's .data()
// 2) Re-run validation on each of them. Since the others are now
// flagged as being in the process, they will skip this section,
// and therefore won't turn around and validate everything else
// 3) Once that's done, we remove the 'currently being validated' flag
// from all the elements
if(!$(element).data('being_validated')) {
var fields = $(selector, element.form);
fields.data('being_validated', true);
// .valid() means "validate using all applicable rules" (which
// includes this one)
fields.valid();
fields.data('being_validated', false);
}
return validOrNot;
// {0} below is the 0th item in the options field
}, jQuery.format("Please fill out at least {0} of these fields."));
हुर्रे!
चिल्लाओ
अब उस चिल्लाहट के लिए - मूल रूप से, मेरे कोड ने नेत्रहीन संदेशों को फिर से सत्यापित करने के बजाय अन्य मेल खाने वाले फ़ील्ड पर छिपा दिया, जिसका अर्थ था कि यदि कोई अन्य समस्या थी (जैसे 'केवल संख्याओं की अनुमति है और आपने पत्र दर्ज किए हैं') , यह तब तक छिपा रहा जब तक उपयोगकर्ता ने सबमिट करने का प्रयास नहीं किया। ऐसा इसलिए था क्योंकि मुझे नहीं पता था कि उपरोक्त टिप्पणियों में उल्लिखित फीडबैक लूप से कैसे बचा जाए। मुझे पता था कि एक रास्ता होना चाहिए, इसलिए मैंने एक सवाल पूछा , और निक क्रेवर ने मुझे बताया। धन्यवाद, निक!
प्रश्न हल किया
यह मूल रूप से "मुझे इसे साझा करने और यह देखने के लिए कि क्या कोई भी सुधार का सुझाव दे सकता है"। हालांकि मैं अभी भी प्रतिक्रिया का स्वागत करता हूं, मुझे लगता है कि यह इस बिंदु पर बहुत पूर्ण है। (यह कम हो सकता है, लेकिन मैं चाहता हूं कि इसे पढ़ना आसान हो और जरूरी नहीं कि संक्षिप्त हो।) तो बस आनंद लें!
अद्यतन - अब jQuery सत्यापन का हिस्सा है
यह आधिकारिक तौर पर 4/3/2012 को jQuery सत्यापन में जोड़ा गया था ।