JQuery सत्यापन प्लगइन का उपयोग कर रेडियो बटन समूह की मान्यता

Question

JQuery सत्यापन प्लगइन का उपयोग करके एक रेडियो बटन समूह (एक रेडियो बटन का चयन किया जाना चाहिए) के लिए सत्यापन कैसे करें?

Comments

उत्तर देखें c.reeves से forum.jquery.com/topic/…

एक नया jQuery सत्यापनकर्ता है जो बहुत शक्तिशाली और उपयोग करने में आसान है। आप इसे देख सकते हैं: code.google.com/p/bvalidator

— Nenad

इस के रूप में सरल के रूप में कुछ के लिए पूरे पुस्तकालय को शामिल नहीं करना चाहते हैं

— डॉग मोलिनक्स 19

Answer 1

Jquery की नई रिलीज़ के साथ (1.3+ मुझे लगता है), आपको बस इतना करना होगा कि सेट किए जाने वाले रेडियो के सदस्यों में से एक को सेट करना होगा और jquery बाकी का ध्यान रखेगा:

<input type="radio" name="myoptions" value="blue" class="required"> Blue<br />
<input type="radio" name="myoptions" value="red"> Red<br />
<input type="radio" name="myoptions" value="green"> Green

उपरोक्त में से कम से कम 3 में से 1 रेडियो विकल्प w / "मेरे विकल्प" का नाम आगे बढ़ने से पहले चुना जाना चाहिए।

महेस द्वारा लेबल सुझाव, btw, अद्भुत काम करता है!

Comments

यह अब jQuery के अपडेट के साथ मेरे लिए सबसे अच्छा जवाब है। +1।

— किरन एंड्रयूज

इसके साथ एकमात्र समस्या यह है कि जब उनमें से किसी की भी जाँच नहीं की जाती है, तो jQuery का सत्यापन लाल रंग में पहले रेडियो बटन को उजागर करता है, लेकिन वास्तव में आप शायद उन सभी को उजागर करना चाहते हैं। इसके अलावा, एक बार जब आप किसी भी रेडियो बटन की जांच करते हैं, तो लाल को दूर जाना चाहिए।

— हेक किया गया

@ हएक आप त्रुटि संदेश को सार्थक रूप से रखने के लिए सत्यापन विकल्पों में त्रुटिप्लस कॉलबैक फ़ंक्शन का उपयोग कर सकते हैं?

— स्वायत्तता

@ हैक्ड: विकल्पों में जोड़ने focusInvalid: falseसे validate()पहले रेडियो बटन के हाइलाइटिंग को रोका जा सकेगा।

— जिम मिलर

मैं हमेशा इसे इस तरह से करता हूं और त्रुटि लेबल में त्रुटि लेबल को स्थिति देता हूं। यह वह है जो मैं रेडियो बटन के लिए करता हूं: यदि (एलिमेंट (आईईएस (इनपुट: रेडियो))) {error.insertAfter (एलिमेंट.परेंट ()); } और {error.insertAfter (तत्व); }

— फ्रांसिस्को गोल्डनस्टीन

Answer 2

रेडियो बटन समूह चयन को मान्य करने के लिए निम्नलिखित नियम का उपयोग करें

myRadioGroupName : {required :true}

myRadioGroupName नाम विशेषता के लिए आपके द्वारा दिया गया मान है

Comments

ध्यान दें कि यदि आप लेबल की स्थिति को नियंत्रित करना चाहते हैं, तो आप अपनी स्वयं की त्रुटि लेबल प्रदान कर सकते हैं, जहाँ आप इसे उस पाठ के साथ चाहते हैं जो आप चाहेंगे: <लेबल for = "myRadioGroupName" वर्ग = "त्रुटि" शैली = "प्रदर्शन: कोई नहीं; "> कृपया एक चुनें। </ लेबल>

— टॉम

@ यह labelत्रुटि के लिए अपने आप को टैग लिखने के लिए बेकार है , वास्तव में प्लगइन स्वचालित रूप से इस त्रुटि लेबल टैग को जोड़ता है।

— अहममेरी

बल्कि एक लंबे समय से पहले, लेकिन मुझे लगता है कि मैं जो करने की कोशिश कर रहा था वह <लेबल> को कहीं और डोम में जगह देना था, बजाय इसके कि यह प्लगइन द्वारा स्वचालित रूप से बनाया गया था। इसके अलावा, यह काफी संभव है कि पिछले 5 वर्षों में प्लगइन व्यवहार बदल गया है ...

— टॉम

दुख की बात है कि कस्टम त्रुटियों के लिए यहां "प्रकार" के बजाय "नाम" की आवश्यकता कैसे होती है।

— justdan23

Answer 3

आप इसका उपयोग भी कर सकते हैं:

<fieldset>
<input type="radio" name="myoptions[]" value="blue"> Blue<br />
<input type="radio" name="myoptions[]" value="red"> Red<br />
<input type="radio" name="myoptions[]" value="green"> Green<br />
<label for="myoptions[]" class="error" style="display:none;">Please choose one.</label>
</fieldset>

और बस इस नियम को जोड़ें

rules: {
 'myoptions[]':{ required:true }
}

नियम जोड़ने का उल्लेख करें।

Comments

लेकिन यह HTML5 सत्यापन पर त्रुटियों को लाएगा, मेरा मानना ​​है कि विशेषता के लिए एक आईडी संदर्भ होना चाहिए (जो हम एक ही आईडी पर 3 रेडियो बटन सेट नहीं कर सकते हैं)।

— सेनाफोडा 12mnkeys

नाम विशेषता और आईडी विशेषता के बीच एक बड़ा अंतर है।

— नॉर्मन एच

कृपया नहीं कि एक रेडियो बटन को केवल एक मान वापस करना चाहिए, उसके name="myoptions[]"बाद, यह थोड़ा भ्रमित करने वाला है क्योंकि यह संकेत देता है कि कई मान वापस आ सकते हैं।

— देहाती

शीर्ष पर त्रुटि संदेश डालता है। <शैली> .radio-group {स्थिति: रिश्तेदार; मार्जिन टॉप: 40px; } # myoptions- त्रुटि {स्थिति: निरपेक्ष; शीर्ष: -25 पीएक्स; } </ शैली> <div class = "रेडियो-समूह"> <इनपुट प्रकार = "रेडियो" नाम = "myoptions" मान = "नीला" वर्ग = "आवश्यक"> ब्लू <br /> <इनपुट प्रकार = "रेडियो" नाम = "myoptions" मान = "लाल"> लाल <br /> <इनपुट प्रकार = "रेडियो" नाम = "myoptions" मूल्य = "हरा"> हरा </ div> </ div> <! - अंत रेडियो- समूह ->

— सोनोबोर

Answer 4

ब्रैंडन के जवाब के अनुसार। लेकिन अगर आप ASP.NET MVC का उपयोग कर रहे हैं जो विनीत सत्यापन का उपयोग करता है, तो आप डेटा-वैल विशेषता को पहले एक में जोड़ सकते हैं। मुझे प्रयोज्य के लिए प्रत्येक रेडियो बटन के लिए लेबल रखना भी पसंद है।

<span class="field-validation-valid" data-valmsg-for="color" data-valmsg-replace="true"></span>
<p><input type="radio" name="color" id="red" value="R" data-val="true" data-val-required="Please choose one of these options:"/> <label for="red">Red</label></p>
<p><input type="radio" name="color" id="green" value="G"/> <label for="green">Green</label></p>
<p><input type="radio" name="color" id="blue" value="B"/> <label for="blue">Blue</label></p>

Answer 5

मान्य करने का दूसरा तरीका इस तरह है।

var $radio = $('input:radio[name="nameRadioButton"]');
$radio.addClass("validate[required]");

मुझे उम्मीद है कि मेरा उदाहरण आपकी मदद करेगा

Answer 6

मुझे भी यही समस्या थी। सत्यापनकर्ता के लिए एक कस्टम हाइलाइट और अनहाइलाइट फ़ंक्शन लिखने के लिए बस घाव करें। इसे वैधता विकल्पों में जोड़कर त्रुटि वर्ग को तत्व और उसके संबंधित लेबल में जोड़ना चाहिए:

        'highlight': function (element, errorClass, validClass) {
            if($(element).attr('type') == 'radio'){
                $(element.form).find("input[type=radio]").each(function(which){
                    $(element.form).find("label[for=" + this.id + "]").addClass(errorClass);
                    $(this).addClass(errorClass);
                });
            } else {
                $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
                $(element).addClass(errorClass);
            }
        },
        'unhighlight': function (element, errorClass, validClass) {
            if($(element).attr('type') == 'radio'){
                $(element.form).find("input[type=radio]").each(function(which){
                    $(element.form).find("label[for=" + this.id + "]").removeClass(errorClass);
                    $(this).removeClass(errorClass);
                });
            }else {
                $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
                $(element).removeClass(errorClass);
            }
        },

Answer 7

रेडियो बटन के लिए कोड -

<div>
<span class="radio inline" style="margin-right: 10px;">@Html.RadioButton("Gender", "Female",false) Female</span>
<span class="radio inline" style="margin-right: 10px;">@Html.RadioButton("Gender", "Male",false) Male</span>                                                        
<div class='GenderValidation' style="color:#ee8929;"></div>    
</div> 

<input class="btn btn-primary" type="submit" value="Create" id="create"/>

और jQuery कोड-

<script>
    $(document).ready(function () {
        $('#create').click(function(){

            var gender=$('#Gender').val();
            if ($("#Gender:checked").length == 0){
                $('.GenderValidation').text("Gender is required.");
                return false;
            }
        });
    });
</script>

Answer 8

शीर्ष पर त्रुटि संदेश डालता है।

   <style> 

 .radio-group{ 
      position:relative; margin-top:40px; 
 } 

 #myoptions-error{ 
     position:absolute; 
     top: -25px; 
  } 

 </style> 

 <div class="radio-group"> 
 <input type="radio" name="myoptions" value="blue" class="required"> Blue<br /> 
 <input type="radio" name="myoptions" value="red"> Red<br /> 
 <input type="radio" name="myoptions" value="green"> Green </div>
 </div><!-- end radio-group -->