C# ASP.NET MVC中如何防止组合框未选值时提交表单

你之前在分部视图内编写JS不生效，通常是两个原因：一是JS执行时机早于表单、下拉框元素渲染完成，事件没有绑定成功；二是分部视图为动态异步加载，直接绑定的事件无法作用于后加载的DOM元素。
下面是适配你场景的可行方案，不需要给Model加全局Required特性，不会出现下拉框隐藏时被错误拦截的问题：

方案1：事件委托式表单提交校验（实现最简单，适配动态分部视图） #

不要把JS写在分部视图内部，把校验逻辑放在主视图/布局页的公共脚本区域，通过事件委托的方式绑定表单提交事件，只在下拉框可见时触发校验：

$(function () {
    // 事件委托绑定，动态加载的分部视图内的表单也能触发
    $(document).on('submit', '#targetFormId', function (e) {
        // 清空历史校验提示
        const $validationMsg = $('[data-valmsg-for="Approver_Id"]');
        $validationMsg.empty();
        let pass = true;

        const $approverSelect = $('#ddlEmployees');
        // 仅当下拉框可见时校验选中值
        if ($approverSelect.is(':visible')) {
            const selected = $approverSelect.val();
            // 判定空值/默认占位值为无效
            if (!selected || selected === '' || selected === '0') {
                pass = false;
                $validationMsg.text('请选择有效的审批人');
                $approverSelect.focus();
            }
        }

        if (!pass) {
            e.preventDefault();
            return false;
        }
    })
})

使用时把代码里的#targetFormId替换成你实际表单的ID即可，下拉框隐藏时校验逻辑会直接跳过，完全符合你的需求。

方案2：动态调整jQuery Validate校验规则（适配MVC自带校验体系） #

如果你的项目已经启用了MVC默认的jQuery Unobtrusive Validation，可以直接在控制下拉框显示/隐藏的业务逻辑里，动态给下拉框增删required规则，和自带的校验样式、逻辑完全打通：

/**
 * 切换审批人下拉框的必填规则
 * @param {boolean} isRequired 是否必填
 */
function switchApproverRequired(isRequired) {
    const $ddl = $('#ddlEmployees');
    if (!$ddl.length) return;
    if (isRequired) {
        $ddl.rules('add', {
            required: true,
            messages: { required: '请选择有效的审批人' }
        })
    } else {
        $ddl.rules('remove', 'required');
    }
}

你只需要在原本控制下拉框显示的逻辑里调用switchApproverRequired(true)，隐藏下拉框时调用switchApproverRequired(false)即可，不需要额外写错误提示的DOM操作。

方案3：后端兜底校验（必加，防前端校验被绕开） #

所有前端校验都可以被用户通过修改JS、直接构造请求绕过，必须在后端接口加对应兜底逻辑：

[HttpPost]
public ActionResult FormSubmit(YourFormModel model)
{
    // 根据自身业务逻辑判断当前提交场景是否必须选择审批人
    bool isNeedApprover = CheckBusinessNeedApprover(model);
    if (isNeedApprover && string.IsNullOrWhiteSpace(model.Approver_Id))
    {
        ModelState.AddModelError(nameof(model.Approver_Id), "请选择有效的审批人");
    }

    if (!ModelState.IsValid)
    {
        // 校验不通过，返回带错误信息的视图
        return View(model);
    }

    // 校验通过，执行后续业务逻辑
    return RedirectToAction("SubmitSuccess");
}

注意：后端校验是安全底线，不要因为加了前端校验就省略这一步。

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