带有 JQuery DatePicker 的 MVC 必需文本框答案

【问题标题】：MVC Required Textbox with JQuery DatePicker带有 JQuery DatePicker 的 MVC 必需文本框
【发布时间】：2014-04-17 15:31:17
【问题描述】：

我有一个包含 3 个必填字段的 MVC 表单。一个名称文本框、一个下拉列表和一个附有 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();

【问题讨论】：

标签： jquery asp.net-mvc validation

【解决方案1】：

使用datepicker 的onSelect 事件并在您的日期字段中调用valid()。

根据datepicker 文档http://api.jqueryui.com/datepicker/#option-onSelect this in onSelect 指的是关联的文本字段，所以你可以简单地这样做：

$(".datepicker").datepicker({
    onSelect : function() {
        $(this).valid();
    }
});

【讨论】：

抱歉，我不能 100% 确定在哪里添加。我用当前的 JQuery 添加的，虽然不多，但似乎添加了日历
我修改了答案以包含代码。它未经测试，但应该遵循这些原则。

【解决方案2】：

这篇文章已经存在几年了，但我想我会添加更多的答案......因为我遇到了同样的问题。每当我的表单在没有使用 jQuery datepicker 选择日期的情况下提交时，我都会收到一个客户端验证错误，提示“DateProcessed field is required.' ...但我不能'看不到任何会使该字段成为必填项的任何内容！

型号：

// 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，它会在日期选择器中变为空值（并且显示方便的占位符文本）。但是上面模型的日期字段是一个不可为空的 DateTime 字段，不能设置为空（通过忽略日期选择器而不选择日期）。假设不需要日期，解决方案是首先将字段更改为可为空的 DateTime（如下），然后确保依赖或利用此字段的代码即使为空也能正常工作：

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

享受吧！布赖恩

【讨论】：