带有JQuery DatePicker的MVC必需文本框

Question

我有一个MVC表单，其中包含3个必填字段。名称文本框，下拉列表和附加了JQuery DatePicker的文本框。如果表单已提交且未选择任何内容，则表单将被拒绝，并且文本将显示在表示需要的字段旁边。从JQuery DatePicker文本框中选择日期后，所需的文本仍然存在，而其他两个必需输入则不是这种情况。知道如何解决这个问题吗？

以下是一些图片：

选择日期后

模型

[Required(ErrorMessage="Required")]
public string Requestor { get; set; }

[Required(ErrorMessage="Required")]
[DataType(DataType.Date)]
[Display(Name="Date Requested")]
public DateTime?  Date_Requested { get; set; }

[Required(ErrorMessage = "Required")]
public string Process { get; set; }

查看

<div class="editor-label">
    @Html.LabelFor(model => model.Requestor)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Requestor) 
    @Html.ValidationMessageFor(model => model.Requestor)
</div>
<div class="editor-label">
    @Html.LabelFor(model => model.Date_Requested)
</div>
<div class="editor-field">
    @Html.TextBoxFor(model => model.Date_Requested,new {@class="datepicker" })
    @Html.ValidationMessageFor(model => model.Date_Requested)
</div>
<div class="editor-label">
    @Html.LabelFor(model => model.Approved_Date)
</div>
<div class="editor-field">
    @Html.TextBoxFor(model => model.Approved_Date,new {@class="datepicker" }) 
    @Html.ValidationMessageFor(model => model.Approved_Date)
</div>

JQuery的 这是我找到代码JQuery DatePicker

的地方

$(".datepicker").datepicker();

Answer 1

使用datepicker＆＃39; onSelect事件，并在日期字段中调用valid()。

根据datepicker文档http://api.jqueryui.com/datepicker/#option-onSelect this onSelect中的$(".datepicker").datepicker({ onSelect : function() { $(this).valid(); } }); 引用了关联的文本字段，因此您只需执行此操作：

{{1}}

Answer 2

这篇文章已经存在了几年，但是我认为我会添加更多答案......因为我遇到了同样的问题。每当我的表单被提交而没有使用jQuery datepicker选择日期时，我会得到一个客户端验证错误，说“ DateProcessed字段是必需的。 '...但我不能看不到任何需要该字段的！

模型：

// No attributes applied ([Required] or otherwise in my case)    
public DateTime DateProcessed { get; set; }

模型初始化：

DateProcessed = DateTime.MinValue;

Form.cshtml：

@Html.TextBoxFor(m => m.DateProcessed, new { id = "DateProcessedDatePicker", placeholder = " MM/dd/yyyy" })

.ready（）中的脚本（在Form.cshtml中）：

$('#DateProcessedDatePicker').datepicker({ dateFormat: 'mm/dd/yy' })

那发生了什么事？看来，如果您的日期字段初始化为DateTime.MinValue，它将成为datepicker中的空值（并显示方便的占位符文本）。但上面的模型的日期字段是一个不可为空的DateTime字段，不能设置为null（通过忽略日期选择器而不选择日期）。假设日期不是必需的，解决方案是首先将字段更改为可空的DateTime（下面），然后确保依赖于或利用此字段的代码即使它为空也能正常工作：

// No attributes applied ([Required] or otherwise in my case)    
public DateTime? DateProcessed { get; set; }

享受！ 布赖恩