JQuery 根据其他动态添加的输入字段验证动态添加的输入字段答案

【问题标题】：JQuery validate dynamically added input fields against other dynamically added input fieldsJQuery 根据其他动态添加的输入字段验证动态添加的输入字段
【发布时间】：2021-05-21 15:39:38
【问题描述】：

我有多对输入字段的开始日期和结束日期：

@foreach (var exam in exams){
        <input type="date" data-val="true" required id="StartDate" value="exam.StartDate">
        <input type="date" data-val="true" data-val-endError="Can't be before start date" required>
}

我正在使用 jQuery 的 validator.AddMethod 来验证结束日期是否在开始日期之后：

$.validator.addMethod("endError",
function (value, element, params) {

    var startDate = $("#StartDate").on('input').val();

    if (value.toString() <= startDate) {
        return false;
    } else {
        return true;
    }
});

$.validator.unobtrusive.adapters.addBool("endError");

问题是验证总是将结束日期与第一个开始日期进行比较。我希望将每个结束日期与其相关的开始日期进行比较。

我仍然是 javascript 的新手，但我知道这可能是由于所有 startDate 输入的 id 相同，这是非法的 html。

有没有办法解决这个问题？谢谢！

【问题讨论】：

@foreach.....它的asp.net？
.net core 中的剃须刀页面

标签： javascript jquery asp.net razor unobtrusive-validation

【解决方案1】：

您的代码的问题是您始终引用相同的 id StartDate 所以它的正常验证总是来自相同的开始日期。当你有很多相同的 id 时，id 的搜索总是在第一个停止。

@foreach (var exam in exams){
        <input type="date" data-val="true" required id="****StartDate*****" value="exam.StartDate">
        <input type="date" data-val="true" data-val-endError="Can't be before start date" required>
}

而且不同的标签有相同的id，在html中不好。

在您的验证器中，您引用 StartDate id

var startDate = $("#StartDate").on('input').val();

一种解决方案是创建一个 id 索引：

@{int i=1;}
@foreach (var exam in exams){
        <input type="date" data-val="true" required id="StartDate@(i)" value="exam.StartDate">
        <input type="date" data-val="true" data-val-endError="Can't be before start date" required>

    i++;
}

您调整验证器以捕获正确的 id。

例如，我建议您创建一个属性data-id，然后输入 StarDate 的 id：所以在验证器中您捕获正确日期的 id

$.validator.addMethod("endError", function (value, element, params) {
    var idstartDate = $(element).attr("data-id");
    var startDate= $(idstartDate).on('input').val();
      :

然后你修改循环：

@{int i=1;}
@foreach (var exam in exams){
        <input type="date" data-val="true" required id="StartDate@(i)" value="exam.StartDate">
        <input type="date" data-id="#StartDate@(i)" data-val="true" data-val-endError="Can't be before start date" required>

    i++;

}

【讨论】：