手动添加data-val属性后jQuery Validation的submitHandler不触发问题

问题1原因 #

你遇到的这个现象本质是jquery.validate.unobtrusive.js（ASP.NET MVC配套的非侵入式校验扩展库）的自动初始化机制和jQuery Validation单实例限制共同导致的：

• 当你给控件带data-val属性时，unobtrusive库会在DOM加载完成后自动扫描页面内所有带校验属性的表单，自动调用$("#newUserForm").validate()完成校验器初始化。而jQuery Validation对同一个表单仅允许初始化一次，后续你自己手动调用的validate()方法会被直接忽略，所以你写的submitHandler、invalidHandler完全没有生效，校验器用的是unobtrusive初始化时读取的全局setDefaults配置。
• 当你删除data-val属性后，unobtrusive扫描后判定该表单没有需要校验的字段，不会自动执行初始化逻辑，你手动写的validate()配置就可以正常生效。

问题2解决方案 #

你不需要重新初始化校验器，只需要在unobtrusive自动初始化完成后，获取已存在的校验器实例，修改对应配置即可，这种方式会完全继承setDefaults中定义的全局配置，同时保留data-val相关的校验规则：

$(function() {
    // 等待unobtrusive自动初始化完成后，获取表单的校验器实例
    const validator = $("#newUserForm").data('validator');
    
    // 替换为你自定义的回调
    validator.settings.invalidHandler = function (event, validator) {
        var errors = validator.numberOfInvalids();
    };
    validator.settings.submitHandler = function (form) {
        let selectedRole = $("[name='RoleID']").find("option:selected");
        let selectedRoleADefault = selectedRole.data("isdefault").toLowerCase() === "true";
        let selectedTeams = $("[name='Teams']").val() || [];

        if (!selectedRoleADefault && selectedTeams.length === 0) {
            // 除了设置错误文本，调用showErrors更新校验状态，避免表单误提交
            validator.showErrors({
                "Teams": "You must select at least one Team"
            });
            // 阻止表单提交
            return false;
        }
        form.submit();
    };
});

注：原逻辑中仅设置了错误文本没有阻止提交，会出现错误提示显示后表单仍然提交的问题，以上代码已经修复了该问题。

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