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

【问题标题】：jQuery unobtrusive validation on dynamically generated radio buttons in MVC3?jQuery对MVC3中动态生成的单选按钮进行不显眼的验证？
【发布时间】：2012-10-05 19:52:10
【问题描述】：

我有一个动态表单应用程序，我正在尝试对表单元素应用适当的不显眼的验证，但无法让表单以我想要的方式显示验证错误。

渲染单选按钮表单项的部分视图如下所示：

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

这是给不熟悉 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>

在任何一组单选按钮都得到正确验证的情况下，* 出现在项目旁边。但是，我想做的是将.form-item-responses 中所有内容的文本颜色更改为红色。不仅仅是验证错误消息。

我该怎么做？我尝试像这样使用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");
          });
      }
  });

但这似乎会覆盖默认行为，只需在每个答案组中的第一个单选按钮旁边放置一个黑色 This field is required。我想要默认行为，然后只是这个额外的更改。

【问题讨论】：

在控制台中为您的浏览器触发的任何 javascript 问题？
没有我看到没有。我什至将错误计数的控制台日志放在那里，以确保它正在使用该功能，并且确实如此。但这就是当时发生的一切。
是否在验证后使用“.input-validation-error”类设置了输入标签（在运行时）？
@JuniorMayhé 我不确定 validate 插件的默认行为，但我相信会在验证期间发生。
我只是添加了适当的“必需”类，包括适当的脚本，并且在提交时，如果没有填写需要的内容，它会添加输入验证错误类广播组。

标签： jquery asp.net-mvc jquery-validate

【解决方案1】：

我解决这个问题的方法是从表单中获取验证器作为变量，然后像这样访问 document.ready 中的设置：

        var validatorData = $('#items-form').data('validator');
        validatorData.settings.highlight = function (element, errorClass) {
            $(element).parent().parent().css("color", "red");
        };

我不确定为什么我尝试的第一种方法不起作用。因为这似乎是文档和许多在线示例中的方式。

【讨论】：