Kendo UI TabStrip视图无法加载jQuery客户端验证问题求助

我之前在项目里也碰到过几乎一模一样的问题——Kendo TabStrip的第一个标签页里的表单死活没法正常触发jQuery客户端验证，Chrome里还特别容易出现这种情况。下面是我试过有效的几个解决思路，你可以挨个试试：

1. 在标签页激活时重新初始化验证 #

Kendo TabStrip的非活动标签页默认是display:none状态的，而jQuery验证在页面初始化时只会检测可见的表单元素。所以我们可以在第一个标签页被激活的时候，手动重新初始化表单验证：

$("#your-tabstrip-id").kendoTabStrip({
    activate: function(e) {
        // 判断当前激活的是第一个标签页（索引从0开始）
        if ($(e.item).index() === 0) {
            // 替换成你的表单ID
            $("#target-form").validate({
                // 这里可以配置你的验证规则和提示信息
                rules: {
                    email: {
                        required: true,
                        email: true
                    },
                    password: {
                        required: true,
                        minlength: 6
                    }
                },
                messages: {
                    email: {
                        required: "请输入邮箱地址",
                        email: "请输入有效的邮箱格式"
                    },
                    password: {
                        required: "请输入密码",
                        minlength: "密码长度不能少于6位"
                    }
                }
            });
        }
    }
});

2. 利用contentLoad事件处理异步加载的标签页内容 #

如果你的标签页内容是通过Ajax加载的局部视图，那必须等内容完全加载完成后再初始化验证，这时候contentLoad事件就派上用场了：

$("#your-tabstrip-id").kendoTabStrip({
    contentLoad: function(e) {
        // 定位到第一个标签页的内容
        if ($(e.item).index() === 0) {
            // 找到内容里的表单并初始化验证
            const targetForm = $(e.contentElement).find("form");
            targetForm.validate();
            // 如果用的是ASP.NET的非侵入式验证，还要加下面这句
            $.validator.unobtrusive.parse(targetForm);
        }
    }
});

3. 确保验证脚本的加载时机正确 #

有时候验证失效只是因为脚本加载顺序不对：

• 要确保jquery.js在jquery.validate.js和jquery.validate.unobtrusive.js（如果用的话）之前加载
• 如果是局部视图里的表单，不要在局部视图里重复加载jQuery核心脚本，避免冲突

另外要注意，Chrome对动态DOM元素的检测比其他浏览器更严格，所以绝对不能依赖页面加载时的一次性初始化，必须在标签页内容就绪后再触发验证初始化。

内容的提问来源于stack exchange，提问作者Stefan Østergaard