ASP MVC 5 Client Validation for Range of Datetimes

Question

I want to check an Datetime field in a form. The field is valid between 01/10/2008 and 01/12/2008. Here 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 validate this on the client side. But I get always an error. I give the value 01/11/2008 and it tells me, that the date must be defined between 01/10/2008 and 01/12/2008. I read that it doesn't work client validation without jquery, isn't it? Or I forgot anything? What alternatives are there to get any solution of that problem.

Saket Kumar · Accepted Answer · 2014-11-29 10:32:20Z

15

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

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

Here is your custom validation 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 the validation a generic one:

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

Custom Validation:

    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 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 the working demo:Date Range Validation

edited Nov 29, 2014 at 10:32

answered Nov 28, 2014 at 8:16

Saket Kumar

4,8816 gold badges38 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

JensB Over a year ago

This is the route I would take, but I would also add the date range to validate as a paramater so the code can be reused for all different types of date ranges

MrScf Over a year ago

Thanks, I will try this suggestion!

Harris Yer Over a year ago

But your custom validation only work on server side validation, client side validation need put matching ValidationType to Javascript. If the ValidationType is custom not found in Javascript, have to add on new javascript function to the java script file. Keep in mine if you have more than one custom validation using regular expression as ValidationType, then you can not validate them on the same time. One web control only allow one regular expression validation.

MrScf Over a year ago

To validating on client side, ValidateDateRangeAttribute should only implement IClientValidatable interface, isn't it? On client side I should create an adapter to add a new rule. Would that work?

Saket Kumar Over a year ago

You can try, but i always prefer to use jQuery for client side validation.

|

toddmo · Accepted Answer · 2017-04-28 14:42:24Z

You must specify dates in a certain format on the attribute and you also much provide the value in that format as well. The date input doesn't like MM/dd/yyyy, even though that's the format it displays in! Pretty retarded IMHO.

You need to add min and max like so:

Resulting Html

<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 min or max errors in the UI:

Muhammad Dyas Yaskur · Accepted Answer · 2020-03-10 06:59:56Z

2

Though portions of this have been posted before and downvoted as not working. I can confirm this does work as long as you have both the range and the format string specified.

[Required]
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:mm-dd-yyyy}", ApplyFormatInEditMode = true)]
[Range(typeof(DateTime), "1/1/1900", "12/31/2018",
    ErrorMessage = "Value for {0} must be between {1} and {2}")]
[Display(Name = "Date of Birth")]
public DateTime DateOfBirth { get; set; }

edited Mar 10, 2020 at 6:59

Muhammad Dyas Yaskur

8,35811 gold badges62 silver badges91 bronze badges

answered Mar 10, 2020 at 2:20

Aleksander Brown

211 bronze badge

1 Comment

Heitor Giacomini Over a year ago

Dind't work for me.

Community · Accepted Answer · 2017-05-23 12:18:02Z

0

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

MVC model validation for date

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Dec 6, 2016 at 14:50

Zinov

4,1696 gold badges43 silver badges80 bronze badges

Comments

Venkatesh · Accepted Answer · 2014-11-28 06:00:23Z

-3

Use DataFormat attribute for specifying the date format explicitly as,

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

Refer MSDN doc

answered Nov 28, 2014 at 6:00

Venkatesh

1,2241 gold badge10 silver badges18 bronze badges

2 Comments

MrScf Over a year ago

Would it help that with the validation on client side?

MrScf Over a year ago

I found this linkhttp://stackoverflow.com/questions/21777412/mvc-model-validation-for-date . It seems,jquery doesn't work with ranges

Collectives™ on Stack Overflow

ASP MVC 5 Client Validation for Range of Datetimes

5 Answers 5

11 Comments

Comments

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

11 Comments

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related