为何jQuery Validate不识别ASP.NET生成的data-val验证规则？

我用ASP.NET标签助手生成了带jQuery Validation的表单：

@Html.LabelFor(m => m.Id, new { @class = "control-label" })
@Html.TextBoxFor(m => m.Id, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Id, "", new { @class = "text-danger" })

生成的HTML如下：

<form id="dsForm">       
    <label class="control-label" for="Id">Rule ID</label>
    <input class="form-control" data-val="true" data-val-length="The field Rule ID must be a string with a minimum length of 3 and a maximum length of 100." data-val-length-max="100" data-val-length-min="3" data-val-required="Rule ID is required." id="Id" maxlength="100" name="Id" type="text" value="">
    <span class="text-danger field-validation-valid" data-valmsg-for="Id" data-valmsg-replace="true"></span>    
</form>

我尝试通过以下方式触发验证：

<a onclick="dsValidate()">Validate</a>

<script>
    function dsValidate() {
        $('#dsForm').validate();

        if ($('#dsForm').valid() === true) {
            console.log("valid");
        } else {
            console.log("invalid");
        }
    }
</script>

但不管输入是否违反data-val里的规则，控制台始终输出"valid"。而直接在JS里定义规则就能正常工作：

$('#dsForm').validate({
    rules: {
        Id: {
            required: true,
            minlength: 3,
            maxlength: 100
        }
    },
    messages: {
        Id: {
            required: "ID is required.",
            minlength: "ID must be 3-100 chars.",
            maxlength: "ID must be 3-100 chars."
        }
    }                
});

我已经确认库的加载顺序正确：

<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

为什么validate()无法识别data-val属性里的规则？

核心原因 #

jquery.validate.unobtrusive.js会在页面加载完成后自动解析data-val系列属性，将其转换为jQuery Validation的规则并完成表单验证的初始化。但你手动调用空参数的$('#dsForm').validate()时，会覆盖掉unobtrusive已经初始化好的验证实例，而空参数的validate()不会读取data-val规则，导致验证逻辑完全失效。

解决方案 #

1. 直接调用valid()触发验证
   无需手动调用validate()初始化，unobtrusive已经完成了这一步，直接用valid()方法就能触发验证：

   function dsValidate() {
       if ($('#dsForm').valid() === true) {
           console.log("valid");
       } else {
           console.log("invalid");
       }
   }
   

2. 如需自定义配置，修改已有验证实例
   如果要添加额外规则或调整默认配置，不要重新调用validate()，而是获取unobtrusive初始化好的验证实例进行修改：

   // 获取已初始化的验证实例
   var validator = $('#dsForm').data('validator');
   // 添加自定义规则或修改提示信息
   validator.settings.rules.Id.customRule = true;
   validator.settings.messages.Id.customRule = "自定义验证提示";
   

3. 表单重置后重新解析规则
   如果有表单重置操作，需要重新触发unobtrusive的规则解析，确保验证状态正确：

   $('#dsForm')[0].reset();
   $.validator.unobtrusive.parse('#dsForm');
   

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