javascript - Html.CheckBoxFor 的 JQuery Validate 和 C# ASP MVC 问题

Question

我使用 .NET Framework 4.7 和 ASP.NET MVC 来生成表单并进行验证，我有 jQuery Validate，它适用于经典输入字段，但对于 @Html.CheckBoxFor 它生成了 2 个输入同名，第一个是标准输入，第二个是隐藏的，.NET 默认，但 jQuery 验证对此不起作用。

唯一对我有用的是为特定元素添加验证规则，但这种方法不会委托(delegate)消息，仅应用CSS类样式为无效输入添加红色背景

什么可行但还不是理想的解决方案

$("input[name='Do[0].IsSelected']:not(:hidden)").rules("add", {
  required: true,
  messages: { required: "field is required." },
});

什么不适用于 JQuery 验证:

C# 代码:

<div class="col-lg-7 do-checkbox">
        @Html.CheckBoxFor(m => m.Do[i].IsSelected, isViewModeForCheckBox, new { id = "chb_do" + i, onchange = "RemoveUpload(" + i + ");", @class = "form-check-input" })
        @Model.Do[i].Text
</div>

生成此 HTML 输出:

<div class="col-lg-7 do-checkbox">
    <input class="form-check-input" data-val="true" data-val-required="The IsSelected field is required." disabled=""
        id="chb_do0" name="Do[0].IsSelected" onchange="RemoveUpload(0);" readonly="" type="checkbox" value="true"
        aria-invalid="true">
    <label id="Do[0].IsSelected-error" class="border-danger shadow-danger" for="Do[0].IsSelected"
        style="display: none;"></label>
    <input name="Do[0].IsSelected" type="hidden" value="false" class="valid">
    Info text
</div>

JQuery 验证:

$("form[name='reg']").validate({
  ignore: ":hidden",
  errorClass: "border-danger shadow-danger",
  errorPlacement: function () {},
  rules: {
    "Reg.Name": "required",
    "Do[0].IsSelected": {
      required: true,
      email: function (element) {
        return $("input[name='Do[0].IsSelected']:not(:hidden)").is(":checked");
      },
    },
  },
  messages: {
    "Reg.Name": "Info error message",
    "Do[0].IsSelected": {
      required: "Enter a username",
      email: "Enter at least {0} characters",
    },
  },
  invalidHandler: function (event, validator) {
    var errors = validator.numberOfInvalids();
    if (errors) {
      var message =
        errors == 1
          ? "Info 1 field missing"
          : "Info  " + errors + " fields missing";

      if (validator.errorList.length > 0) {
        for (x = 0; x < validator.errorList.length; x++) {
          message += "</br>\n\u25CF " + validator.errorList[x].message;
        }
      }
      $("div.error span").html(message);
      $("div.error").show();
    } else {
      $("div.error").hide();
    }
  },
  submitHandler: function () {
    document.forms["reg"].submit();
  },
});

jQuery 验证将 CSS 类添加到第二个隐藏输入，并且不显示消息 我还使用了additions.methods.js扩展库，但没有成功

Answer 1

我认为问题是正如您所说，jQuery Validate 默认情况下会忽略隐藏的输入字段，因此它不会验证 @Html.CheckBoxFor 帮助器生成的隐藏复选框。

解决此问题的一种方法是使用 validate() 方法的忽略选项来指定隐藏复选框应包含在验证中。例如，您可以使用以下代码:

$("form[name='reg']").validate({
    ignore: ":hidden",
    rules: {
        "Reg.Name": "required",
        "Do[0].IsSelected": {
            required: true,
            email: function(element) {
                return $("input[name='Do[0].IsSelected']:not(:hidden)").is(":checked");
            }
        },
    },
    messages: {
        "Reg.Name": "Info error message",
        "Do[0].IsSelected": {
            required: "Enter a username",
            email: "Enter at least {0} characters",
        },
    },
});

如果您使用 .net core >= v5 那么您可以将其添加到启动中:

 services.Configure<MvcViewOptions>(options =>
 {    
  options.HtmlHelperOptions.CheckBoxHiddenInputRenderMode = 
  CheckBoxHiddenInputRenderMode.None;
 });

如果您无法使用核心，另一种选择是编写一个自定义 html 帮助程序，它生成不带隐藏字段的复选框，例如:

public static MvcHtmlString BasicCheckBox<TModel>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, bool>> expression, object htmlAttributes)
{
    var cbHidden= htmlHelper.CheckBoxFor(expression, htmlAttributes).ToHtmlString().Trim();
    string basicCheck = cbHidden.Substring(0, cbHidden.IndexOf("<input", 1));
    return new MvcHtmlString(basicCheck);
}

如果这不起作用，请告诉我，我可以更深入地研究。