ASP.NET MVC3：驗證日期時間和自定義驗證消息

我將如何防止用戶鍵入到datetimepicker（文本字段），但允許他們使用datetimepicker。
我如何驗證一個日期是在另一個日期之後，並顯示它內聯（並防止提交），就像ASP.Net MVC3一樣。 javascript並沒有太多的檢查它的問題，它是如何去顯示這個內聯消息並阻止提交，與其他驗證綁定在一起。

  $("#Save").click(function (e) { 
       if ( $('#EndTime').val() < $('#StartTime').val()) 
        alert("AHRR"); // Should add an inline message and NOT submit. 
      });

來源

2011-12-01 Doomsknight

我也有興趣學習這個特定的MVC 3驗證事情...檢查這一個：http://forums.asp.net/t/1698991.aspx/1希望它有助於作爲一個開始。 –

我誤解了你的問題嗎？您是否正在使用MVC 3驗證來驗證日期，或者編寫自定義JS？ – Rastapopulous

哪一個。我只是希望它以同樣的方式工作 – Doomsknight

我會建議使用jQuery's datepicker做客戶端上的日期範圍的約束。您需要禁用輸入元素<input readonly/>。我最近實現了一個適用於我的日期範圍約束。它限制結束日期在開始日期的90天之內

僅供參考，我停止使用startElement和endElement作爲測試，從未返回，因爲此代碼當前未被重用。

// ============================================================================ 
// FUNCTION: InitializeDates(startElement, endElement) 
// PARAMETERS 
// ---------- 
// startElement: The element which will be initialized as the start-date 
//     datepicker. 
// 
// endElement:  The element which will be initialized as the start-date 
//     datepicker. 
// 
// DESCRIPTION 
// ----------- 
// InitializeDates updates the start and end dates for non-employees. It 
// creates a date-picker object on both fields and then constrains the end 
// end date: 
// * No date selections available prior to the start date 
// * No date selections available after 90 days beyond the start date. 
// ---------------------------------------------------------------------------- 
function InitializeDates(startElement, endElement) 
{ 
    $("#f-start-date").datepicker({ 
     showOn: "button", 
     buttonImage: "images/calendar.png", 
     buttonImageOnly: true, 
     onSelect: function(dateText, inst) { StartDateSelected(dateText, inst) } 
    }); 

    $("#f-end-date").datepicker({ 
     showOn: "button", 
     buttonImage: "images/calendar.png", 
     buttonImageOnly: true, 
     numberOfMonths: 3 
    }); 

    $("#f-start-date").val(''); 
    $("#f-end-date").val(''); 
} 

// ============================================================================ 
// FUNCTION: StartDateSelected(dateText, endElement) 
// PARAMETERS 
// ---------- 
// dateText: The dateText passed from jQuery.datepicker.onSelect 
// inst:  The instpassed from jQuery.datepicker.onSelect// 
// 
// DESCRIPTION 
// ----------- 
// Updates the end-date maxDate and minDate fields to 91 dates from the selected 
// start date. 
// --------------------------------------------------------------------------- 
function StartDateSelected(dateText, inst) 
{ 
    var second = 1000; 
    var minute =second * 60; 
    var hour = minute * 60; 
    var day = hour * 24; 

    // The datepicker updates maxDate and minDate based on today's date. I've 
    // got to math out dates so that the maxDate is actually 91 days from the 
    // selected date. 
    var todaysDate = new Date(); 
    var selectedDate = new Date(dateText);   
    var duration = Math.floor((selectedDate - todaysDate)/day) + 91; 

    $("#f-end-date").datepicker("option", "minDate", selectedDate); 
    $("#f-end-date").datepicker("option", "maxDate", duration); 
    $("#f-end-date").val(''); 
}

來源

2011-12-01 18:25:55

+1爲了一個好的概念。只讀屬性。比禁用屬性好得多。乾杯 – Doomsknight

禁用輸入框：<input type="text" disabled="disabled"/>然後使用日期選擇器的值插入文本框。
您可以禁用表單上的提交按鈕，直到日期驗證正確。您可以爲此編寫自定義JavaScript，但它只會在客戶端進行驗證。你也可以在MVC 3中編寫一個驗證日期的自定義驗證器。

有關更多信息，請參閱JQuery Validation。 MVC 3使用JQuery庫來執行驗證，您可以重寫這些方法來實現您的日期驗證。

來源

2011-12-01 15:18:52 Rastapopulous

與'disabled = true'具有相同的效果 - 這可以防止我點擊它並因此激活datetimepicker。（我可以添加圖標來打開它旁邊的datetimepicker，但是id不是。） – Doomsknight

至於防止鍵入到datetimepicker字段，使用jQuery掛鉤到鍵入事件，並清除該字段中的任何文本。假設你正在使用jQuery 1.6或更早版本，代碼如下所示：

$("input[id$='Time']").live("keyup", function() { 
    $(this).val(""); 
});

此外，還可以考慮加入一個佔位符屬性指引用戶不鍵入日期。

至於一個比較日期驗證，你會在這個問題上找到一個很好的例子：MVC3 custom validation: compare two dates

來源

2011-12-01 18:12:55 counsellorben

ASP.NET MVC3：驗證日期時間和自定義驗證消息

回答

相關問題