Custom DateTime Validation for MVC 3 unobtrusive client side validation

Hi, I am using MVC 3 unobtrusive client side validation and I need to implement some custom validation rules for my DateTime field.

I got ExpiryDate and Storagedate, where Expirydate should be later or equal to today's date. Also, the Expirydate should not be earlier than the StorageDate.

However, I got no idea how to implement the custom validation. I got the partial class to customize the validation in my Model like this:

[MetadataType(typeof(FoodMetaData))]
    public partial class FOOD
    {
        [Bind(Exclude = "FoodID")]
        public class FoodMetaData
        {
            [ScaffoldColumn(false)]
            public int FoodID { get; set; }

            [Required(AllowEmptyStrings = false, ErrorMessage = "Please enter a name")]
            public object FoodName { get; set; }

            public object StorageDate { get; set; }

            public object ExpiryDate { get; set; }
      }
   }

Any idea how can I declare a custom validation for the DateTime field?? I googled a lot but still no able to find similar solution... Please help...

Re: Custom DateTime Validation for MVC 3 unobtrusive client side validation

Use the DateTimeInput and the DateRangeAttribute of my Mvc Controls Toolkit. You can define both the previous constraint, on the client side and on the server side, easily by placing two DateRange attributes on the ExpiryDate each for each constraint and by adding a new property called ToDay to your ViewModel (it has just a get returning today). User would not be able to enter a date is nort allowed at all. You have also the option, when the user choose a storageDate, to change expiryDate automatically to make the constraint holds instead of limiting the value of ExpiryDate.

The example application here show an example of use. Other examples of the use of the DateTimeInput are...pratically in almost all tutorials.

Re: Custom DateTime Validation for MVC 3 unobtrusive client side validation

Hi, can you give me some example??

Because I need something like [DateRange(SMaximum = "2012-1-1", SMinimum = "2008-1-1")] but if for ExpiryDate, i only need the minimum part which is Today's date && StorageDate. I not really understand how to do this since there is no example available there..

Sorry and thanks for your kind help..

Re: Custom DateTime Validation for MVC 3 unobtrusive client side validation

There are examples....you have to see the ViewModel used in the page of the software distribution. Anyway:

1) define a property you call Today (for example):

[Milestone]

public DateTime Today {

get{

return DateTime.Now;

}

please notoce the milestone attribute, this inform the engine that the proprty will not be renderedi in the page;

now you write:

[DateTange(DynamicMinimum='Today')]

[DateTange(DynamicMinimum='StorageDate')]

public DateTime ExpiryDate{get; set;}

This way when user will introduce a wrong date the date will be automatically corrected to match the constraint.

if you use [DateTange(DynamicMinimum='StorageDate', RangeAction = RangeAction.Propagate)]

instead when user will introduce e data that is smaller than ExpiryDate ExpiriDate will be decreased in the Html page to keep the constraint valid.

Th minimum you have define are called Dinamic because they depends on the value of other properties. I suggest to addr also some fixed minimum and fixed maximum, say 1900 and 2100 or less, do force the date to be in an interval tha male sense for your application in any case:

[DateTange(DynamicMinimum='StorageDate', SMaximum = "2000-1-1", SMinimum = "2100-1-1")]

You can add as many date range attribute you like to the same property.

Re: Custom DateTime Validation for MVC 3 unobtrusive client side validation

Hi, really thanks for your detailed answer. But I still cant it work.. Do I need to add anything else (in script or etc..) for the DateRange validation to work? Currently even I put my expirydate to < today's date, nothing happen (no validation message, no auto-correct). I could not find the problem.. I will show my code here:

[MetadataType(typeof(FoodMetaData))]
    public partial class FOOD
    {
        [Bind(Exclude = "FoodID")]
        public class FoodMetaData
        {
            [ScaffoldColumn(false)]
            public int FoodID { get; set; }

            [DateRange(DynamicMinimum="Today", ErrorMessage="Test")]
            [DateRange(DynamicMinimum="StorageDate", ErrorMessage="Test storage date")]
            public DateTime ExpiryDate { get; set; }

            
        }

        [MileStone]
        public DateTime Today
        {
            get { return DateTime.Now; }
        }
    }

The Form:

@using (Html.BeginForm("CreateFood", "Stock", FormMethod.Post, new { id = "formData" }))
{
    @Html.ValidationSummary(false, "Opps. Please correct the mistakes")

    <div class="editor-label">
        Expiry Date
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.ExpiryDate, new { @class = "expirydate" })
        @Html.ValidationMessageFor(model => model.ExpiryDate)
    </div>
}

Validation for other field do works, just for date i get nothing.. Please help... Really appreciate it....

Re: Custom DateTime Validation for MVC 3 unobtrusive client side validation

1) The autorrect behaviour happens just if you use the DateTimeInput of the Mvc Controls Toolkit: http://mvccontrolstoolkit.codeplex.com/wikipage?title=DateTimeInput%20and%20DateRange%20attribute otherwise, normal unobtrusive validation is performed and when the field is invalid the usual validation message is shown.

2) For everything to work properly you have to install the Mvc Controls Toolkit since it has custom Validation and Metadata provider. It is available throught Nuget (Mvc3ControlsToolkit or Mvc2ControlsToolkit), or you can install it manually as explained here: http://mvccontrolstoolkit.codeplex.com/wikipage?title=Installation

Re: Custom DateTime Validation for MVC 3 unobtrusive client side validation

Hi, I did install it.. but I still cant get any validation message.. is it a must to use Html.DateTimeFor for the validation to work? If yes, do you have any idea how to assign a class to Html.DateTimeFor helper like what I did for the EditorFor?

<div class="editor-field">
        @Html.EditorFor(model => model.ExpiryDate, new { @class = "expirydate" })
        @Html.ValidationMessageFor(model => model.ExpiryDate)
    </div>

And is it any additional steps needed because I am using a datepicker?

Really thanks for your help....

Re: Custom DateTime Validation for MVC 3 unobtrusive client side validation

In my previous post I have not noticed you use editorFor....It is not compulsory to use DateTimeFor...but you can't use editorfor on the single datetime value for the reasons I explain below. In any case I strongly suggest to use DateTimeFor...it offers you more options. DateTimeFor returns an object you can use to render separately the date part and the time part. You can style both with separate css.

The date part can be rendered with three dropdowns(Date method) or with a jQuery picker(DateCalendar method). Both methods have an html attributes dictionary new Dictionary<object, string> {{"class", "expirydate"}}.

However if you use the jquery picker the html attributes will apply just to the textbox the DatePicker will be attached to. To style the picker you have to customiza a jQuery UI css file

Now I can explain why the editorfor cannot be used: the point is that bot fields that need to be compared need to be in the same model, otherwise there is no way for the mvc engine to read the value to compare. This means both the field Today and ExpiryDate MUST be in the same model because the value of Today must be read and inserted in the validationattributes of ExpiryDate....Now if you use EditorFor on the single ExpiryDate property behind the scene Mvc creates a new model containing just this field ExpiryDate and pass it to a new View....so it is impossible to read the value of Today from there :) THERE IS NO WAY TO OVERCOME THIS LIMIT, that apply to all conditional validation attributes, since it depends on how the core data structure of the Mvc engine were designed.

However the constraint on Storagedate should work, because it is resolved on the client side, since the Storagedate filed is rendered in the View (at least I have understood ...this way)

Re: Custom DateTime Validation for MVC 3 unobtrusive client side validation

Hi, sorry but i dont really understand how to change the editorfor to datetimefor...

Re: Custom DateTime Validation for MVC 3 unobtrusive client side validation

See the example of use of the DateTimeFor here: BinariesWithSimpleExamples

Basically:

@{var DT = DateTimeFor(m => m.ExpiryDate, dateInCalendar : true)}

@DT.DateCalendar(
                    inLine: false,
                    calendarOptions: new CalendarOptions
                    {
                         ChangeYear=true,
                         ChangeMonth=true,
                          
                    },

containerHtmlAttributes: new Dictionary<string, object> {{"class", "expirydate"}})

There are various calendar option you can choose....I put the ones I like more

I have chosen to use the jQuery picker, so you have to include the relateive js files, and css

Re: Custom DateTime Validation for MVC 3 unobtrusive client side validation

HI, thank you so much but i didnt work.. i get compilation error...

Re: Custom DateTime Validation for MVC 3 unobtrusive client side validation

Sorry I have written that code directly in the post without compiling it..and in a hurry...so I forgot the Html before the DateTimeFor and a ;

This should work:

@{var DT = Html.DateTimeFor(m => m.ExpiryDate, dateInCalendar : true);}

@DT.DateCalendar(
                    inLine: false,
                    calendarOptions: new CalendarOptions
                    {
                         ChangeYear=true,
                         ChangeMonth=true,
                          
                    },

containerHtmlAttributes: new Dictionary<string, object> {{"class", "expirydate"}})

Re: Custom DateTime Validation for MVC 3 unobtrusive client side validation

Hi, i get "Value cannot be null" instead...

Re: Custom DateTime Validation for MVC 3 unobtrusive client side validation

The point is that you showed me just the MetaDataType...so I don't know too much of your model. Does your ExpiryDate is a DateTime? ie a nullable DateTime ?

In such a case you have to furnish a default date to be used as initial date when the Date is null as shown below:

@{var DT = Html.DateTimeFor(m => m.ExpiryDate, dateInCalendar : true, emptyDate: DateTime.Now);}

Obviously you can set emptyDate to whatever you like not necessaruly to DateTime.Now.

Don't forget to include also the js and css files needed by the jQuery datepicker. Finally, either you render the StorageDate in yiour page with a DateTimeInput, or apply to it the Milestone attribute as you have done with the Today property.

Re: Custom DateTime Validation for MVC 3 unobtrusive client side validation

HI, really thanks for your help. But both of my date field is not nullable type. ALso, there is nth wrong with the datepicker.. I just simply cant make the validation work..

Re: Custom DateTime Validation for MVC 3 unobtrusive client side validation

Pls motice, you will see no error message, but the user will simply unable to insert a wrong date, because any wrong date will be ccorrected to be withing the constraints.

Pls prepare a selfcontained example with no db and send it to me through the contact form of my blog(it has the option to attach files).

Re: Custom DateTime Validation for MVC 3 unobtrusive client side validation

Hi yenni

You can write the code as follow:

public sealed class ExpiryDateAttribute : ValidationAttribute
        {
            public override bool IsValid(object value)
            {
                DateTime expiryDate = (DateTime)value;
                return (expiryDate >= DateTime.Now);
            }
        }

        public sealed class StoragedateAttribute : ValidationAttribute
        {
            public string expiryDateProperty { get; set; }
            public override bool IsValid(object value)
            {
                string expiryDateString = HttpContext.Current.Request[expiryDateProperty];
                DateTime storagedate = (DateTime)value;
                DateTime expiryDate = DateTime.Parse(expiryDateString);

                return expiryDate < storagedate;
            }
        }

And in your view model:

[ExpiryDate]
        public DateTime ExpiryDate { get; set; }

        [Storagedate(expiryDateProperty = "ExpiryDate")]
        public DateTime Storagedate { get; set; }

Hope this helpful

Regards

Young Yang

Re: Custom DateTime Validation for MVC 3 unobtrusive client side validation

Hi, amazingly it works! Really thanks a lot for your help...
I got one more question, do you have any idea how I can validate both the datefield to ensure it is a valid Datetime in a specific format? Because even with the datepicker, user can input any string/numbers in the textfield and click submit.. so I want to validate those manually entered value to ensure it is a DateTime which match the format of my datepicker's Date declared as:

$('#expirydate').datepicker({
            constrainInput: true,
            minDate: 0,
            dateFormat: 'D, dd M yy'
        });

And one of the datetime form field with the format:

<div class="editor-label">
        Expiry Date
    </div>
    <div class="editor-field">
        @Html.TextBox("ExpiryDate", String.Format("{0:ddd, d MMM yyyy}", DateTime.Now), new { id = "expirydate" })
        @Html.ValidationMessageFor(model => model.ExpiryDate)
    </div>

Really thanks a lot for your help!

Re: Custom DateTime Validation for MVC 3 unobtrusive client side validation

Hi yenni,

You just need to add a regularexpression attribute in your model, you can do it like this:

[ExpiryDate]
[RegularExpression(@"^(19|20)dd([- /.])(0[1-9]|1[012])2(0[1-9]|[12][0-9]|3[01])$)]
public DateTime ExpiryDate { get; set; }

You can change the expression to what you want.

Hope this helpful

Regards

Young Yang

Re: Custom DateTime Validation for MVC 3 unobtrusive client side validation

HI, Thanks!! But I cant find any regex which validate date in the format of Mon, 31 Oct 2011 (datepicker format: 'D, dd M yy'), any idea??

Really thanks a lot...