Validation of an ASP MVC 5 Client for a Range of Time Values

Question

I want to check the Datetime field on a form. The field is valid from 01/10/2008 to 01/12/2008. This is how I defined the viewmodel property:

[Required(ErrorMessage = "The date value is mandatory")] [DataType(DataType.DateTime)] [Range(typeof(DateTime), "01/10/2008", "01/12/2008")] [DisplayName("When the work starts")] public DateTime StartWork { get; set; } 

I want to test this on the client side. But I always get an error. I give the value 01/11/2008, and he tells me that the date should be defined between 01/10/2008 and 01/12/2008. I read that this does not work client validation without jquery, right? Or am I forgetting something? What alternatives exist to get any solution to this problem.

Answer 1

I think you can implement this using custom validation in MVC. Try using this:

 [ValidateDateRange] public DateTime StartWork { get; set; } 

Here is your custom verification implementation:

 namespace MVCApplication { public class ValidateDateRange: ValidationAttribute { protected override ValidationResult IsValid(object value, ValidationContext validationContext) { // your validation logic if (value >= Convert.ToDateTime("01/10/2008") && value <= Convert.ToDateTime("01/12/2008") ) { return ValidationResult.Success; } else { return new ValidationResult("Date is not in given range."); } } } } 

UPDATE:

You can also pass date ranges as parameters to make validation common:

 [ValidateDateRange(FirstDate = Convert.ToDateTime("01/10/2008"), SecondDate = Convert.ToDateTime("01/12/2008"))] public DateTime StartWork { get; set; } 

User check:

  namespace MVCApplication { public class ValidateDateRange: ValidationAttribute { public DateTime FirstDate { get; set; } public DateTime SecondDate { get; set; } protected override ValidationResult IsValid(object value, ValidationContext validationContext) { // your validation logic if (value >= FirstDate && value <= SecondDate) { return ValidationResult.Success; } else { return new ValidationResult("Date is not in given range."); } } } } 

UPDATE 2: (for the client side) A very simple jQuery logic should do the client validation. Check below:

 $(document).ready(function(){ $("#btnSubmit").click(function(){ var dt = $("#StartWork").val(); var d = new Date(dt); var firstDate = new Date("2008-01-10"); var secondDate = new Date("2008-01-12"); if(d>= firstDate && d<= secondDate) { alert("Success"); } else { alert("Date is not in given range."); } }); }); 

Please check this JSFiddle to see a working demo: Checking the date range

Answer 2

You must specify dates in a specific format for the attribute, as well as specify a value in this format. Entering a date is not like MM/dd/yyyy , although it is displayed in this format! Pretty backward IMHO.

You need to add min and max like this:

HTML Result

 <input class="form-control text-box single-line input-validation-error" data-val="true" data-val-date="The field DOB must be a date." data-val-required="The DOB field is required." id="DOB" name="DOB" type="date" value="1932-01-01" aria-required="true" aria-describedby="DOB-error" aria-invalid="true" min="1932-01-01" max="2015-01-01"> 

Model

 [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)] [DataType(DataType.Date)] public DateTime DOB { get; set; } 

View

 @Html.EditorFor(model => model.DOB, new { htmlAttributes = new { @class = "form-control", min = "1900-01-01", max = "2015-01-01" } }) 

Then you will get the minimum or maximum errors in the user interface:

Answer 3

Checking the date of the range can also be done using FluentValidation, which may be another solution to your problem, check my answer. Hope this helps

Check MVC model for date

Answer 4

Use the DataFormat attribute to specify the date format explicitly, as

 [DisplayFormat(DataFormatString="{0:C}")] 

Refer MSDN Document