问题描述
|
我正在尝试对单选按钮列表进行必要的验证,以强制用户选择一个选项以继续。验证确实有效,但是它仅在第一个单选按钮上输出元数据,并且仅将第一个单选按钮标记为类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;
}