एएसपी.नेट एमवीसी 3 अविभाज्य सत्यापन और रेडियो बटन

Question

मैं जारी रखने के विकल्प को चुनने के लिए उपयोगकर्ता को मजबूर करने के लिए रेडियो बटन की एक सूची पर आवश्यक सत्यापन करने की कोशिश कर रहा हूं। सत्यापन काम करता है लेकिन यह केवल पहले रेडियो बटन पर मेटाडेटा आउटपुट करता है और यह केवल कक्षा इनपुट-सत्यापन-त्रुटि के साथ पहला रेडियो बटन चिह्नित करता है।

उदाहरण:

<p>@Html.RadioButtonFor(x => x.Choices, SomeEnum.OptionOne)</p> 
<p>@Html.RadioButtonFor(x => x.Choices, SomeEnum.OptionTwo)</p> 

परिणामस्वरूप HTML:

<p><input class="input-validation-error" data-val="true" data-val-required="required text" type="radio" name="Choices" value="OptionOne" /></p> 
<p><input type="radio" name="Choices" value="OptionTwo" /></p> 

मैं दोनों रेडियो बटन सत्यापन त्रुटि श्रेणी प्राप्त करना चाहते हैं या इसे बढ़ा रही क्या विकल्प उपयोगकर्ता चयन जोखिम हो सकता है।

मैं क्या कर सकता हूं?

Answer 1

मैंने रेडियोबटन के लिए सीएसएस को अक्षम करने और केवल त्रुटि संदेश दिखाने के लिए किया था। (नहीं यकीन है कि आईई पसंद करती है इस)

.input-validation-error input[type="radio"] 
{ 
    border: 0x solid #ff0000; 
    background-color: inherit; 
} 

Answer 2

कृपया ध्यान दें कि निम्नलिखित कोड

@Html.RadioButtonFor(x => x.MyEnumProperty, MyEnum.OptionOne) 
@Html.RadioButtonFor(x => x.MyEnumProperty, MyEnum.OptionTwo) 
@Html.RadioButtonFor(x => x.MyEnumProperty, MyEnum.OptionThree) 

की अपेक्षित व्यवहार

<input id="MyEnumeration" type="radio" value="Option1" 
     name="MyEnumeration" 
     data-val-required="The MyEnumeration field is required." data-val="true"> 
<input id="MyEnumeration" type="radio" value="Option2" name="MyEnumeration"> 
<input id="MyEnumeration" type="radio" value="Option3" name="MyEnumeration"> 

है क्यों? क्योंकि Html.SomethingFor(model => model.Property) एक विशेष संपत्ति के लिए एक HTML तत्व उत्पन्न करने के लिए है। एक संपत्ति से एक से अधिक तत्व बनाने के लिए आप इसका उपयोग करने का तरीका सही नहीं है।

इसके अलावा, इन 3 रेडियो बटनों की आईडी देखें। वे सुंदर हैं, नहीं? क्या एक HTML पृष्ठ पर एक ही आईडी वाले तत्व होने के लिए स्वीकार्य है? बिलकुल नहीं! इसलिए कुछ तय करने की जरूरत है।

हालांकि मुझे लगता है कि एक नई एचटीएमएल एक्सटेंशन विधियों (संदर्भ 2) के विकास से इस समस्या को हल करना आसान है, मैंने इसे किसी अन्य तरीके से हल करने की कोशिश की (क्योंकि मैं इतना जिद्दी हूँ!)।

<div> 
    @Html.RadioButtonFor(m => m.MyEnumeration, MyEnum.Option1, new { id = "m1" }) 
    <label for="m1"> 
     OPTION 1</label> 
    @Html.RadioButtonFor(m => m.MyEnumeration, MyEnum.Option2, new { id = "m2" }) 
    <label for="m2"> 
     OPTION 2</label> 
    @Html.RadioButtonFor(m => m.MyEnumeration, MyEnum.Option3, new { id = "m3" }) 
    <label for="m3"> 
     OPTION 3</label> 
</div> 

फिर, जावास्क्रिप्ट/jQuery जादू का एक टुकड़ा हमारे मुद्दे को ठीक करने के लिए:: प्रथम रेडियो बटन एक सत्यापन को जन्म देती है

<script type="text/javascript"> 
    $(function() { 
     $('[name=MyEnumeration]').each(function (index) { domAttrModified(this); }); 
    }); 

    function domAttrModified(obj) { 
     //$obj = $(obj); 
     $(obj).bind('DOMAttrModified', function() { 
      if ($(obj).attr('class').indexOf('input-validation-error') != -1) 
       $(obj).parent().addClass('input-validation-error'); 
      else 
       $(obj).parent().removeClass('input-validation-error'); 
     }); 
    } 
</script> 

कभी भी

सबसे पहले, हम उस्तरा कोड बदलने की जरूरत है त्रुटि, यह जावास्क्रिप्ट कोड त्रुटि बटन सीएसएस वर्ग (input-validation-error) रेडियो बटन के मूल तत्व पर लागू होता है, जो <div> तत्व है।

और कभी भी सत्यापन त्रुटि दूर हो जाती है (किसी भी रेडियो बटन तत्वों पर क्लिक करके), मूल तत्व से त्रुटि शैली हटा दी जाती है।

यह आईई और एफएफ में बहुत अच्छा काम करता है, लेकिन दुर्भाग्य से क्रोम में काम नहीं करता है। कारण क्रोम DOMAttrModified ईवेंट का समर्थन नहीं करता है। हम इस समाधान का उपयोग करके इसे ठीक कर सकते हैं: https://stackoverflow.com/a/10466236/538387, लेकिन शायद कुछ समय बाद।

फिर से, मेरा मानना ​​है कि हम एक HTML एक्सटेंशन विधि को विकसित करने या सुधार लाने और इस तरह एक EditorTemplate उपयोग करने की आवश्यकता: https://gist.github.com/973482

संदर्भ:

1. https://stackoverflow.com/a/7098541/538387
2. https://stackoverflow.com/a/3448675/538387
3. https://gist.github.com/973482
4. Event detect when css property changed using Jquery

Answer 3

यह showErrors कॉलबैक का उपयोग करके किया जा सकता है:

$("form").data("validator").settings.showErrors = function (errorMap, errorList) { 
    this.defaultShowErrors(); 

    $("input[type=radio][data-val=true].input-validation-error").each(function() { 
     $("input[name=" + $(this).attr('name') + "]").addClass("input-validation-error"); 
    }); 

    $("input[type=radio][data-val=true]:not(.input-validation-error)").each(function() { 
     $("input[name=" + $(this).attr('name') + "]").removeClass("input-validation-error"); 
    }); 
};