jQuery Validate 如何校验动态生成的多组成对开始/结束日期输入框

你的判断完全准确：页面内重复使用相同的id="StartDate"违反HTML全局唯一id的规范，通过$("#StartDate")选择器永远只会匹配DOM中第一个出现的同名元素，这是所有结束日期都对比第一组开始日期的直接原因。同时原实现还有两处可优化的逻辑问题：

• 在校验方法中给元素绑定input事件的逻辑冗余，每次触发校验都会重复绑定事件，造成不必要的性能损耗
• Razor视图中value="exam.StartDate"是纯字符串渲染，没有绑定模型的真实日期值

1. 改造Razor视图的动态渲染逻辑 #

在循环中给每对日期输入设置全局唯一标识，同时通过data属性建立两个输入的关联关系，彻底规避重复id问题：

@foreach (var exam in exams)
{
    <div class="date-pair">
        @* 开始日期：绑定唯一id，正确渲染模型值 *@
        <input 
            type="date" 
            data-val="true" 
            required 
            id="StartDate_@exam.Id" 
            value="@exam.StartDate.ToString("yyyy-MM-dd")">

        @* 结束日期：通过data属性存储对应开始日期的id *@
        <input 
            type="date" 
            data-val="true" 
            data-val-endError="Can't be before start date"
            data-start-ref="StartDate_@exam.Id"
            required>
    </div>
}

2. 重写自定义校验规则的逻辑 #

替换掉硬编码的全局选择器，基于传入的关联参数精准匹配同组的开始日期：

$.validator.addMethod("endError",
function (value, element, params) {
    // 通过参数获取同组开始日期输入框
    var $startInput = $("#" + params);
    var startDateVal = $startInput.val();
    
    // 开始日期未填写时跳过校验，避免误判
    if (!startDateVal) return true;
    
    // date类型输入返回的yyyy-MM-dd格式字符串可直接比较大小
    return value > startDateVal;
});

// 替换原来的addBool适配器，从data属性读取关联的开始日期id作为校验参数
$.validator.unobtrusive.adapters.add("endError", [], function (options) {
    options.rules["endError"] = $(options.element).data("start-ref");
    options.messages["endError"] = options.message;
});

• 完全符合HTML的id唯一规范，选择器匹配精度100%，不会出现跨组匹配的问题
• 两个日期的关联关系通过data属性明确绑定，不依赖DOM层级结构，后续页面布局调整不会破坏校验逻辑
• 移除了原代码中重复绑定事件的冗余逻辑，没有性能损耗

注意：如果不想通过data属性建立关联，也可以通过相对DOM位置查找同组开始日期，比如写$(element).siblings("input[type='date']").first().val()，但这种方式对DOM结构的耦合度太高，后续布局调整很容易引发校验失效，不推荐作为长期维护方案。

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