ASP.Net MVC 8.0表单外关联输入为何不触发客户端验证？

问题原因 #

ASP.NET MVC的客户端验证依赖jQuery Validate和Unobtrusive Validation实现，默认逻辑仅会扫描<form>标签内部的输入元素，解析data-val-*系列验证属性（比如data-val-required）并绑定验证规则。当你使用空<form>标签，通过form属性关联外部输入时，初始化验证器的过程不会主动识别这些外部元素，导致提交时客户端验证完全跳过，只有服务端验证生效。

涉及的客户端核心代码细节 #

1. 验证初始化逻辑：页面加载时，Unobtrusive Validation会调用$.validator.unobtrusive.parse("form")，该方法仅遍历目标<form>内部的元素，不会处理外部带form属性的元素。
2. jQuery Validate元素范围：默认验证器的规则集合仅包含<form>内的:input元素，外部关联元素不会被自动加入验证队列。
3. 提交触发逻辑：点击<form>内的提交按钮时，验证器只会检查自身内部的元素，不会主动扫描外部关联的输入。

最优解决方案（无需调整DOM结构） #

方案1：扩展验证器的元素集合（推荐） #

通过手动将外部关联元素添加到验证器的规则集合，并重写提交验证逻辑，确保覆盖所有关联元素：

$(document).ready(function() {
    // 替换为你的form ID
    const formId = "#scenario-form";
    const $form = $(formId);

    // 初始化默认表单验证
    $.validator.unobtrusive.parse(formId);

    // 获取所有关联到该form的外部输入元素
    const $externalInputs = $(`[form="${$form.attr('id')}"]`);

    // 为每个外部元素解析验证规则并绑定到表单验证器
    $externalInputs.each(function() {
        const $input = $(this);
        // 解析元素的验证规则
        $.validator.unobtrusive.parseElement(this, true);
        // 将规则和提示信息添加到表单验证器的配置中
        const validator = $form.data('validator');
        validator.settings.rules[$input.attr('name')] = $input.data('rules');
        validator.settings.messages[$input.attr('name')] = $input.data('messages');
    });

    // 重写表单提交事件，确保验证所有关联元素
    $form.on('submit', function(e) {
        let isValid = true;

        // 验证外部关联元素
        $externalInputs.each(function() {
            if (!$form.data('validator').element(this)) {
                isValid = false;
            }
        });

        // 验证表单内部元素（默认逻辑）
        if (!$(this).valid()) {
            isValid = false;
        }

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

方案2：手动触发全量验证 #

如果不想修改验证器的内部配置，可以在提交按钮点击时，手动触发所有关联元素的验证：

$(document).ready(function() {
    const formId = "#scenario-form";
    const $form = $(formId);
    const $submitBtn = $form.find('button[type="submit"]');
    // 合并表单内部和外部关联的所有输入元素
    const $allInputs = $form.find(':input').add($(`[form="${$form.attr('id')}"]`));

    $submitBtn.on('click', function(e) {
        let isValid = true;
        // 逐个验证所有关联元素
        $allInputs.each(function() {
            if (!$.validator.unobtrusive.element(this)) {
                isValid = false;
            }
        });

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

    // 初始化表单验证
    $.validator.unobtrusive.parse(formId);
});

这两个方案都无需调整现有DOM结构，完美适配你“多表单内联显示、不可嵌套”的需求，基于ASP.NET原生验证框架扩展，兼容性和可维护性都更好。

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