ASP.NET MVC假期申请表单：选过去日期时显示非阻止性警告

我来帮你搞定这个需求：当员工选择过去的日期时，显示友好的警告提示，但不阻止他们提交申请。咱们分前端提示和后端兼容两部分来实现，完全贴合你现有的ASP.NET MVC代码：

第一步：前端添加实时日期警告 #

我们可以借助jQuery UI Datepicker的事件，实时检查用户选择的日期，动态显示警告（注意别用ASP.NET自带的ValidationMessage，那会让表单无法提交）。修改你视图里的脚本部分：

@section Scripts {
    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/cssjqryUi")
    <script type="text/javascript">
        $(document).ready(function () {
            // 初始化日期选择器，加上选择事件监听
            $('input[type=datetime]').datepicker({
                dateFormat: "dd/M/yy",
                changeMonth: true,
                changeYear: true,
                yearRange: "-70:+70",
                // 用户选完日期就触发检查
                onSelect: function(dateText) {
                    checkIfPastDate($(this), dateText);
                }
            });

            // 页面加载时如果已有旧日期，也自动显示警告
            $('input[type=datetime]').each(function() {
                if ($(this).val()) {
                    checkIfPastDate($(this), $(this).val());
                }
            });
        });

        // 检查日期是否为过去日期的函数
        function checkIfPastDate(inputBox, selectedDateStr) {
            // 把日期字符串转成Date对象，和今天比较
            var selectedDate = $.datepicker.parseDate("dd/M/yy", selectedDateStr);
            var today = new Date();
            today.setHours(0, 0, 0, 0); // 只比较日期，忽略时间

            // 动态创建警告元素（如果还没的话）
            var warningMsg = inputBox.siblings('.past-date-alert');
            if (warningMsg.length === 0) {
                warningMsg = $('<div class="text-warning"><i class="fa fa-exclamation-triangle"></i> 提示：你选择了过去的日期，确认要提交吗？</div>');
                inputBox.after(warningMsg);
            }

            // 根据日期判断显示/隐藏警告
            if (selectedDate < today) {
                warningMsg.show();
            } else {
                warningMsg.hide();
            }
        }
    </script>
}

这里的小细节： #

• 用Bootstrap的text-warning类显示黄色警告，和红色的必填错误区分开，用户一眼就能分清是提示不是错误
• 警告元素会自动加到输入框下方，不会干扰原来的验证消息
• 不管是选新日期还是页面加载时已有旧日期，都会触发检查

第二步：确保后端不拦截提交 #

你的现有后端代码里，只要ModelState.IsValid为true就会保存申请。只要你的HolidayRequestForm模型里没给日期加限制过去日期的验证属性（比如[Range]），表单就能正常提交。

如果想在后端也给用户一个反馈（比如提交后返回视图时显示提示），可以在POST方法里加个自定义提示，但不要标记ModelState为无效：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "RequestID,StartDate,FinishDate,HoursTaken,Comments,YearCreated,MonthCreated,DayCreated,YearOfHoliday,Approved,SubmittedBy,ApprovedBy")] HolidayRequestForm holidayRequestForm)
{
    // 检查是否选了过去的日期
    var today = DateTime.Today;
    if (holidayRequestForm.StartDate < today || holidayRequestForm.FinishDate < today)
    {
        // 添加一个全局提示，不影响ModelState的有效性
        ModelState.AddModelError("", "你选择了过去的日期，申请已正常提交。");
    }

    if (ModelState.IsValid)
    {
        // 你的原有保存逻辑
        if (Session["Name"] == null)
        {
            TempData["msg"] = "Your Session Expired - Please Login";
            return RedirectToAction("Login", "Account");
        }
        string name = Session["Name"].ToString();
        var employeeID = db.Employees.Where(s => s.Email.Equals(name)).Select(s => s.EmployeeID).FirstOrDefault();
        holidayRequestForm.EmployeeID = employeeID;
        var submittedby = db.Employees.Where(s => s.Email.Equals(name)).Select(s => s.Email).FirstOrDefault();
        holidayRequestForm.SubmittedBy = submittedby;
        db.HolidayRequestForms.Add(holidayRequestForm);
        db.SaveChanges();
        SendMailToAreaManager();
        SendMailToManager();
        SendMailToAdmin();
        return RedirectToAction("Index", "Calendar");
    }

    ViewBag.EmployeeID = new SelectList(db.Employees, "EmployeeID", "FullName", holidayRequestForm.EmployeeID);
    return View(holidayRequestForm);
}

可选优化：提交前二次确认 #

如果怕用户误选过去日期，可以给提交按钮加个确认弹窗：

<script>
    $('input[type=submit]').click(function(e) {
        // 如果有显示的警告，就弹出确认框
        if ($('.past-date-alert:visible').length > 0) {
            if (!confirm("你选择了过去的日期，确认要提交这个假期申请吗？")) {
                e.preventDefault(); // 用户取消就阻止提交
            }
        }
    });
</script>

这样用户提交前会再确认一次，减少误操作的可能。

内容的提问来源于stack exchange，提问作者Conor8630