日历验证错误仅在通过 Jquery UI 第二次选择日期后消失

Question

我有一个类似下面的 DatePicker。

问题是下面的验证错误在日期被 selected 时不会消失，只有在第二次 selected 后才会消失。

也就是说，在开始时，我点击了提交按钮，这会触发所有 "required" 验证错误，然后 select 每个日期输入字段来自 Canlendar 控件的日期。出现上述问题。

其他输入文本控件（普通文本，非canlender）的错误在第一次输入数据时消失。

The LastShipment field is required.

查看以下型号：

   public class MyViewModel
{

    [Required]
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:dd-MM-yy}", ApplyFormatInEditMode = true)]
    public DateTime? LastShipment { get; set; }
}

查看页面，下面省略了其他html个元素：

     <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
           <link href="~/lib/jquery-ui-themes-1.12.1/themes/blitzer/jquery-ui.css" rel="stylesheet" />
        </head>

<form asp-action="Details" id="stock-form">
     <div asp-validation-summary="ModelOnly" class="text-danger"></div>

     for (int i = 0; i < Model.Items.Count(); i++)
    {
        <div class="form-group item-group col-last-shipment">
        <input asp-for="@Model.Items[i].LastShipment" class="form-control stock-item stock-input last-shipment" type="text" asp-format="{0:dd-MM-yy}" />
        <span asp-validation-for="@Model.Items[i].LastShipment" class="text-danger"></span>
         </div>
    }

     <div class="clear"></div>
     <div class="form-group">
        <input type="submit" value="Submit" class="btn btn-primary button-primary" />
       </div>
</form>
    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

        <script src="~/lib/jquery-ui-1.12.1/jquery-ui.js">
         </script>
            $("input.last-shipment").datepicker();
        </script>

生成HTML for one date control below

<div class="form-group item-group col-last-shipment">
<input class="form-control stock-item stock-input last-shipment hasDatepicker input-validation-error" type="text" data-val="true" data-val-required="The LastShipment field is required." id="Items_3__LastShipment" name="Items[3].LastShipment" value="" aria-describedby="Items_3__LastShipment-error" aria-invalid="true">
 <span class="text-danger field-validation-error" data-valmsg-for="Items[3].LastShipment" data-valmsg-replace="true"><span id="Items_3__LastShipment-error" class="">The LastShipment field is required.</span></span>
</div>

Answer 1

在您的日期选择器默认设置中设置以下代码，一旦选择了另一个日期，它就会使验证器插件重新检查该字段：

@model MyViewModel
<form asp-action="Details" id="stock-form">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>

    <div class="form-group item-group col-last-shipment">
        <input asp-for="@Model.LastShipment" class="form-control stock-item stock-input last-shipment" type="text" asp-format="{0:dd-MM-yy}" />
        <span asp-validation-for="@Model.LastShipment" class="text-danger"></span>
    </div>
    <div class="clear"></div>
    <div class="form-group">
        <input type="submit" value="Submit" class="btn btn-primary button-primary" />
    </div>
</form>
@section Scripts
{
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $("input.last-shipment").datepicker({
            onClose: function () {
                $(this).valid();
            }
        });

    </script>
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}

结果：

日历验证错误仅在通过 Jquery UI 第二次选择日期后消失

Calendar validation error only disppears after second times selecting a date via Jquery UI

jquery

jquery-ui

jquery-ui-datepicker

asp.net-core