[英]jQuery unobtrusive validation on dynamically generated radio buttons in MVC3?
I've got a dynamic forms app and am trying to apply proper unobtrusive validation for the form elements and am having trouble with getting the form to display validation errors the way I want. 我有一个动态的表单应用程序,正在尝试对表单元素进行适当的不干扰验证,并且在使表单以我想要的方式显示验证错误时遇到麻烦。
My partial view to render the radio button form items looks like this: 我的呈现单选按钮表单项的局部视图如下所示:
@model FormItem
<div class="form-row">
<div class="form-item">@Model.Text</div>
<div class="form-item-responses">
@foreach(FormItemResponse formItemResponse in Model.Responses.OrderBy(x => x.SortOrder))
{
if(Model.Required)
{
@Html.RadioButton(Model.Id.ToString(), formItemResponse.Id, formItemResponse.DefaultSelection, new { @class = "required", data_val = "true", data_val_required = "*"}) @formItemResponse.Text
}
else
{
@Html.RadioButton(Model.Id.ToString(), formItemResponse.Id, formItemResponse.DefaultSelection) @formItemResponse.Text
}
<text> </text>
}
<span class="field-validation-valid" data-valmsg-for="@Model.Id.ToString()" data-valmsg-replace="true"></span>
</div>
Here is the final markup for those not familiar with MVC: 这是不熟悉MVC的人的最终标记:
<div class="form-row">
<div class="form-item">Form Item Text Here</div>
<div class="form-item-responses">
<input class="required" data-val="true" data-val-required="*" name="026d44a7-fa55-4fe8-8d2f-4f561c77c716" type="radio" value="dcfa4a9a-53e1-44d5-b6b3-a133673bfa2e" />Yes
<input class="required" data-val="true" data-val-required="*" name="026d44a7-fa55-4fe8-8d2f-4f561c77c716" type="radio" value="0042876b-2362-4f65-9c8a-dddf7f8206e8" />No
<input class="required" data-val="true" data-val-required="*" name="026d44a7-fa55-4fe8-8d2f-4f561c77c716" type="radio" value="a0918eab-93b6-4e45-a78d-301e28571037" />NA
<span class="field-validation-valid" data-valmsg-for="026d44a7-fa55-4fe8-8d2f-4f561c77c716" data-valmsg-replace="true"></span>
</div>
In works in that any group of radio buttons get properly validated, and the *
comes up next to the item. 在作品中,任何一组单选按钮都经过了正确的验证,并且
*
出现在项目旁边。 However, what I would like to do is change the text color of everything in .form-item-responses
to red. 但是,我想做的是将
.form-item-responses
中所有内容的文本颜色更改为红色。 Not just the validation error message. 不只是验证错误消息。
How can I do this? 我怎样才能做到这一点? I tried using the
invalidHandler
like so: 我试过像这样使用
invalidHandler
:
$("#items-form").validate({
invalidHandler: function (form, validator) {
var errors = validator.numberOfInvalids();
console.log(errors);
$("input.input-validation-error").each(function() {
this.parent().css("color", "red");
});
}
});
But that appears to override the default behavior and just put a black This field is required
next to the first radio button in each answer group. 但这似乎覆盖了默认行为,只是在每个答案组中的第一个单选按钮旁边加了一个黑色的
This field is required
。 I want the default behavior and then just this extra change. 我想要默认行为,然后再进行此额外更改。
The way I fixed this was getting the validator from the form as a variable, then accessing the settings in document.ready like so: 我解决此问题的方法是从表单获取验证器作为变量,然后访问document.ready中的设置,如下所示:
var validatorData = $('#items-form').data('validator');
validatorData.settings.highlight = function (element, errorClass) {
$(element).parent().parent().css("color", "red");
};
I am not sure why the first way I tried it didn't work. 我不确定为什么我尝试的第一种方法没有奏效。 As that seems to be the way in the documentation and on many examples online.
就像在文档和许多在线示例中那样。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.