2011-12-16 14 views
9

तो स्थिति यह है: jquery.multiselect प्लगइन का उपयोग करके jquery.multiselect प्लगइन का उपयोग करके ड्रॉपडाउन बॉक्स जोड़ने का प्रयास करना जो वर्तमान में jquery.validate प्लगइन का उपयोग करता है जिसमें अन्य फ़ील्ड (टेक्स्ट इनपुट फ़ील्ड्स, एकल टेक्स्ट इनपुट जिसमें float मान सीमा है) जो वर्तमान में मान्य है सही ढंग से।jquery.multiselect ड्रॉपडाउन के साथ jquery.Validate का उपयोग कैसे करें?

जब मैं सत्यापन नियम जोड़ने का प्रयास करता हूं तो मुझे jquery.validate को मेरे मल्टीइलेक्ट ड्रॉपडाउन को सत्यापित करने के लिए नहीं मिल सकता है। (सभी मानता है कि आवश्यक प्लगइन्स लोड किए गए हैं - इस्तेमाल किया संस्करणों के लिए नीचे देखें) यहाँ मेरी कोड के स्निपेट होते:

HTML:

<form action="some/action" id="myForm" method="POST"> 
    Input 1: <input type="text" value="" name="input1" maxlength="200" id="input1"><br/> 
    Input 2: <input type="text" value="" name="input2" maxlength="100" id="input2"><br/> 
    Input 3: <input type="text" value="" name="input3" maxlength="50" id="input3"><br/> 
    Select: <select class="someSelect" name="mySelect" id="mySelect" multiple="multiple"> 
     <option value="some_val1">Some Value</option> 
     <option value="some_val2">Some Other Value</option> 
    </select> 
    <input type="submit" value="Submit" /> 
</form> 

जावास्क्रिप्ट:

$(document).ready(function() { 
    $('#mySelect').multiselect({ 
     noneSelectedText: 'Select Something (required)', 
     selectedList: 3, 
     classes: 'my-select' 
    }); 

    $.validator.addMethod("needsSelection", function(value, element) { 
     return $(element).multiselect("getChecked").length > 0; 
    }); 

    $.validator.addMethod("isPercent", function(value, element) { 
     return parseFloat(value) >= 0 && parseFloat(value) <= 100; 
    }); 

    $.validator.messages.needsSelection = 'You gotta pick something.'; 
    $.validator.messages.isPercent = 'Must be between 0% and 100%'; 

    $('#myForm').validate({ 
     rules: { 
      mySelect: "required needsSelection", 
      input1: "required isPercent", 
      input2: "required", 
      input3: "required" 
     }, 
     errorClass: 'invalid' 
    }); 
}); 

संस्करण यदि संस्करणों के बीच संगतता के साथ एक स्पष्ट/ज्ञात समस्या है, तो मैं अपग्राउ कर सकता हूं अगर यह समस्या हल करता है, लेकिन मैंने अपने उद्देश्यों के लिए नवीनतम संस्करणों का उपयोग करके परीक्षण किया है और यह मेरी समस्या को हल नहीं कर रहा है।

jQuery: 1.4.4

jquery.validate: 1.9.0

jquery.multiselect: 1.8

और, हमेशा की तरह, मैं और अधिक जानकारी प्रदान कर सकते हैं जहां संभव/की जरूरत है।

उत्तर

12

तो ऐसा लगता है कि नियम मैं एकाधिक चयन करें के लिए की स्थापना की गई थी वास्तव में चयन के साथ संलग्न कर रहे थे, हालांकि, चूंकि मूल चयन बॉक्स :hiddenjquery.multiselect, jquery.validate डिफ़ॉल्ट रूप से किसी भी छिपे हुए इनपुट को अनदेखा करता है।

समाधान (जो मेरा स्वयं का नहीं है - एक सहकर्मी इसे मिला है) jquery.validate के लिए ignore सेटिंग्स का उपयोग करना है। जो भी चयनकर्ता के साथ ignore सेटिंग एक jQuery .not() में डाल दिया है में पारित हो जाता है, तो समाधान यहाँ एक डबल नकारात्मक उपयोग करने के लिए वास्तव में है:

$('#myForm').validate({ 
    rules: { 
     mySelect: "required needsSelection", 
     input1: "required isPercent", 
     input2: "required", 
     input3: "required" 
    }, 
    ignore: ':hidden:not("#mySelect")', //Tells it to check the hidden select 
    errorClass: 'invalid' 
}); 

ओह!

+0

आपने वास्तव में मेरी मदद की! :) –

+1

मैं हमेशा अपने मुद्दों और समाधानों को पोस्ट करने का प्रयास क्यों करता हूं - मदद करने में खुशी हुई! :) – Mattygabe

+0

आपने मेरी मदद की, तीन! जैसा कि आपने कहा था, "पुhew" – HPWD

0

मुझे लगता है कि आपके दो चयन विकल्पों की तरह एक मूल्य है।

value="some_val1" 

कुछ भी नहीं के एक मूल्य के साथ शीर्ष पर एक विकल्प और चयनित जोड़ने का प्रयास करें:

<option selected="" value="">Please Select Something</option> 
+0

यह समस्या का समाधान नहीं होता:

वास्तव में, स्थिति मैं बस का सामना करना पड़ा वहाँ कोई दूसरा रास्ता नहीं के बाद से मैं एक multistep फार्म के लिए भाग द्वारा मान्य करने के लिए चाहता था। – Mattygabe

0

एक अन्य संभावित समाधान स्पष्ट रूप से मान्य करने के लिए तत्वों निर्दिष्ट करने के लिए है:

$("form").children("input, select, textarea").valid() 

छिपा रूप में अच्छी तरह का चयन मान्य करेगा कि।

$("form").find("[data-stepIndex='1']").children("input, select, textarea").valid() 

आशा है कि यह मदद करता है किसी को