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>
<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>
没有找到相关结果
已邀请:
3 个回复
赣借
是<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元素。您使用它从一个属性创建多个元素的方式不正确。 此外，查看这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><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>）应用于单选按钮的父元素，即元素。 并且只要验证错误消失（通过单击任意单选按钮元素），错误样式就会从父元素中删除。 它在IE和FF中效果很好，但不幸的是在Chrome中不起作用。原因是Chrome不支持事件。我们可以使用以下解决方案来解决它：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属性时事件检测仿普
回调来执行：$(\"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\"); }); };笛驮型迸
.input-validation-error input[type=\"radio\"] { border: 0x solid #ff0000; background-color: inherit; }