jQuery中的开始和结束日期自定义验证

Question

我想为两个@ Html.EditorFor日期输入添加自定义验证（仅在一个视图中），因此开始日期必须小于或等于结束日期。这是我的代码：

<div class="form-group">
    @Html.LabelFor(model => model.DateFrom)
    @Html.EditorFor(model => model.DateFrom, new { htmlAttributes = new { @class = "form-control", @id = "StartDate", @required = "required" } })
    @Html.ValidationMessageFor(model => model.DateFrom, "", new { @class = "text-danger" })

    @Html.LabelFor(model => model.DateTo)
    @Html.EditorFor(model => model.DateTo, new { htmlAttributes = new { @class = "form-control", @id = "EndDate", @required = "required" } })
    @Html.ValidationMessageFor(model => model.DateTo, "", new { @class = "text-danger" })
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(function () {
        $("#StartDate").add("#EndDate").change(function () {
            if ($("#StartDate").val() > $("#EndDate").val() && $("#StartDate").val().length != 0 && $("#EndDate").val().length != 0) {
                alert($("#StartDate").val());
                $("#EndDate")[0].setCustomValidity('Invalid Range');
            }
        });
    });
</script>

我希望添加一个验证器，如果日期范围不正确，它将使用@ Html.ValidationMessageFor显示我的自定义消息，并且它将任何输入设置为无效（从而阻止表单提交）。我尝试了setCustomValidity（），但是它不起作用（什么也没有发生）。我在做什么错？

Answer 1

您有一个用于组的for循环，在其中有另一个用于测试的for循环，该循环为每个测试创建一个单独的div。将div创建功能移到第一个循环并进行相应的编辑，这样它就不会使用测试索引，然后在第二个循环中添加一个函数，该功能将更新组div的内部文本或html。祝你好运。