ASP.NET MVC 3非侵入式验证和单选按钮

如何解决ASP.NET MVC 3非侵入式验证和单选按钮

| 我正在尝试对单选按钮列表进行必要的验证，以强制用户选择一个选项以继续。验证确实有效，但是它仅在第一个单选按钮上输出元数据，并且仅将第一个单选按钮标记为类input-validation-error。 例：

<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>

我希望两个单选按钮都获得验证错误类，否则可能会有使用户选择哪个选项的风险。 我能做什么？     

解决方法

请注意以下代码的预期行为

@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 参考文献： https://stackoverflow.com/a/7098541/538387 https://stackoverflow.com/a/3448675/538387 https://gist.github.com/973482 使用Jquery更改CSS属性时事件检测     ,这可以通过使用

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\");
    });
};

    ,我所做的是禁用单选按钮的css，只显示错误消息。 （不确定IE喜欢这个）

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