ASP.NET MVC 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

我所做的就是禁用單選按鈕的CSS並僅顯示錯誤消息。 （不知道IE喜歡這個）

.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個單選按鈕的ID。他們是相同的，不是嗎？在HTML頁面上使用相同ID的元素是否可以接受？絕對不！因此需要修正一些問題。

雖然我認爲通過開發一個新的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> 

然後，一段JavaScript/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> 

任何時候第一個單選按鈕引起了驗證錯誤，此JavaScript代碼將錯誤css類（input-validation-error）應用於單選按鈕的父元素，它是<div>元素。

隨時驗證錯誤消失（通過單擊任何單選按鈕元素），錯誤樣式將從父元素中刪除。

它在IE和FF中效果很好，但不幸的是在Chrome中不起作用。原因是Chrome不支持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"); 
    }); 
};