日历验证错误仅在第二次通过 Jquery UI 选择日期后才消失
Posted
技术标签:
【中文标题】日历验证错误仅在第二次通过 Jquery UI 选择日期后才消失【英文标题】:Calendar validation error only disppears after second times selecting a date via Jquery UI 【发布时间】:2020-07-21 02:19:04 【问题描述】:我有一个类似的 DatePicker,如下所示。
https://jqueryui.com/datepicker/
问题是,在选择日期时,下面的验证误差不会放置,并且仅在第二次选择日期后才会出现。
也就是说,一开始,我点击了提交按钮,这会触发所有“必需的”验证错误,然后从 Canlendar 控件中为每个日期输入字段选择一个日期。出现上述问题。
其他输入文本控件(普通文本,非 canlender)的错误在第一次输入数据时消失。
LastShipment 字段是必需的。
查看以下模型:
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
<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>
【问题讨论】:
【参考方案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 选择日期后才消失的主要内容,如果未能解决你的问题,请参考以下文章
jQuery - 更改 iframe src 时仅在第二次单击时触发