MVC客户端Data Annotation验证在Bootstrap 4折叠面板中失效求助

问题核心 #

你用.validate().element("#collapse1")是错误的——这个方法需要传入具体的表单控件选择器，而不是折叠面板的容器ID。#collapse1是容器div，不是要验证的文本框，所以验证逻辑根本没作用到目标控件上。

修正后的JS代码 #

直接针对文本框#SpecificChangeRecommended调用验证：

$("#btnAddRecommendation").click(function (event) {
    console.log('%c btnAddRecommendation! ', 'background: #222; color: #bada55');
    // 获取表单验证实例
    var validator = $("#frmFullSubmissionRequest").validate();
    // 验证指定的文本框控件
    validator.element("#SpecificChangeRecommended");
    // 如果需要触发整个表单的验证（包括该控件），也可以直接调用
    // $("#frmFullSubmissionRequest").valid();
});

额外注意事项 #

• 确保页面已经正确引入了MVC验证所需的脚本：
  • jquery.validate.js
  • jquery.validate.unobtrusive.js
• 如果你需要验证折叠面板内的所有表单控件，可以遍历容器内的表单元素逐个验证：

$("#btnAddRecommendation").click(function (event) {
    var validator = $("#frmFullSubmissionRequest").validate();
    // 遍历折叠面板内的所有输入控件
    $("#collapse1 input, #collapse1 textarea, #collapse1 select").each(function() {
        validator.element(this);
    });
});

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