JQuery .validate无法触发验证错误，如何强制必填规则并在SPAN显示错误？

核心问题：字段规则未绑定成功 #

jQuery Validate 是通过表单元素的name属性匹配验证规则的，你当前代码里rules配置用的是Report_Name（对应input的ID），但渲染后的input的name属性是Report.Name，规则根本没绑定到目标字段上，导致验证完全不生效，所以this.valid()和numberOfInvalids()都返回0，表单直接提交。

修正步骤及代码 #

1. 修正规则绑定的字段名

把rules和messages里的字段名改成和input的name属性一致的"Report.Name"（因为包含.特殊字符，必须用引号包裹）。

2. 配置错误提示的显示位置

通过errorPlacement选项，把错误信息指定渲染到ASP.NET生成的<span asp-validation-for="Report.Name">标签内。这个标签的ID默认是Report_Name-error（ASP.NET会自动生成{字段ID}-error格式的ID），也可以用元素关系直接定位。

修正后的完整jQuery代码

$(document).ready(function () {
  $("#formReport").validate({
      // 仅在表单验证通过时触发，无需重复调用valid()
      submitHandler: function (form) {
          alert("表单验证通过，准备提交");
          submitReport();
          // 若需阻止默认表单提交，可添加 return false;
      },
      rules: {
        // 用name属性值绑定规则，特殊字符需用引号包裹
        "Report.Name": {
          required: true
        }
      },
      messages: {
        "Report.Name": {
          required: "Testing: Report_Name required"
        }
      },
      // 指定错误信息渲染到目标span
      errorPlacement: function(error, element) {
          // 方式1：通过ASP.NET生成的固定ID定位
          error.appendTo("#Report_Name-error");
          // 方式2：通过元素相邻关系定位
          // element.next(".text-danger").append(error);
      },
      showErrors: function (errorMap, errorList) {
          var numOfErrors = this.numberOfInvalids();
          alert("showErrors: " + numOfErrors);
          // 调用默认错误显示逻辑，避免自定义方法覆盖原有渲染
          this.defaultShowErrors();
      }
  });
});

额外注意点 #

• 自定义showErrors方法时，必须调用this.defaultShowErrors()，否则默认的错误渲染逻辑会被覆盖，错误信息无法正常显示。
• 确保jQuery Validate库已正确引入，且版本与jQuery兼容。

内容的提问来源于stack exchange，提问作者Bill