对MVC3中动态生成的单选按钮进行jQuery不显眼的验证?

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>&nbsp; &nbsp;</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            &nbsp; &nbsp;
    <input class="required" data-val="true" data-val-required="*" name="026d44a7-fa55-4fe8-8d2f-4f561c77c716" type="radio" value="0042876b-2362-4f65-9c8a-dddf7f8206e8" />No            &nbsp; &nbsp;
    <input class="required" data-val="true" data-val-required="*" name="026d44a7-fa55-4fe8-8d2f-4f561c77c716" type="radio" value="a0918eab-93b6-4e45-a78d-301e28571037" />NA            &nbsp; &nbsp;
    <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. Not just the validation error message.

在工作中，任何一组单选按钮都得到适当的验证，然后*出现在项目旁边。但是，我想做的是将.form-item-response中的所有内容的文本颜色更改为红色。不只是验证错误消息。

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. I want the default behavior and then just this extra change.

但这似乎覆盖了默认行为，只需在每个应答组的第一个单选按钮旁边放一个黑色的字段。我想要默认的行为然后就是这个额外的改变。

1 个解决方案

#1

The way I fixed this was getting the validator from the form as a variable, then accessing the settings in document.ready like so:

我解决这个问题的方法是从表单中获取验证器作为变量，然后访问文档中的设置。准备好如下所示:

        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.

我不知道为什么我的第一次尝试没有成功。这似乎是文档和在线示例中的方法。

#1