Validate DateFormat In Mvc

Question

I have a property ExpiredDate define in MVC

[Required]
        [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]
        public DateTime? ExpirationDate { get; set; }

I want to Validate if Date on a page is not in correct format. The format of date I am using is MM/dd/yyyy.

MVC will validate according to formate by default, if you need client side validation, you need to turn on unobtrusive javascript on you application — Rab Khan
– Rab Khan, Commented May 15, 2013 at 12:57
Set the ApplyFormatInEditMode property to true in the DisplayFormatAttribute — asawyer
– asawyer, Commented May 15, 2013 at 13:03
@asawyer Sir it doesnot validate and page postback. i want to stop the postback and want to show the format message. — Abhishek
– Abhishek, Commented May 15, 2013 at 13:12
Please also read the first comment: You need to turn on unobtrusive javascript on your application — Kenneth
– Kenneth, Commented May 15, 2013 at 13:14

KyleMit · Accepted Answer · 2018-08-21 13:40:57Z

26

You should use the DataType attribute with DataType.Date. Both of which are in the System.ComponentModel.DataAnnotations namespace and can be used like this:

[Required]
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]
public DateTime? ExpirationDate { get; set; }

This answer also includes some more attributes.

Update: To enable client-side validation in ASP.NET MVC4, you need to do this:

Add the jquery.validation plugin to the footer

<%: Scripts.Render("~/Scripts/jquery.validate.min.js") %>
<%: Scripts.Render("~/Scripts/jquery.validate.unobtrusive.min.js") %>

Add this to web.config

<appSettings>
  <add key="ClientValidationEnabled" value="true" />
  <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

Use this css when using @Html.ValidationMessageFor() so that it is initially hidden and displays via the javascript validation

/* styles for validation helpers */
.field-validation-error {
    color: #e80c20;
    font-weight: bold;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #e80c20;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #e80c20;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-valid {
    display: none;
}

edited Aug 21, 2018 at 13:40

KyleMit♦

31.4k74 gold badges517 silver badges712 bronze badges

answered May 15, 2013 at 13:55

truemedia

1,0827 silver badges12 bronze badges

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

6 Comments

truemedia Over a year ago

To enable client-side validation, just add the jquery.validate plugin to your footer like this:

<%: Scripts.Render("~/Scripts/jquery.validate.min.js") %> <%:Scripts.Render("~/Scripts/jquery.validate.unobtrusive.min.js") %>

Abhishek Over a year ago

Sir @truemedia, i have tried this code [Required(ErrorMessage="ss")] [DataType(DataType.Date)] [DisplayFormat(ApplyFormatInEditMode = true,DataFormatString = "{0:MM/dd/yyyy}")] public DateTime? date { get; set; }

Abhishek Over a year ago

the page still postback even if it doesnt contain any date and also postback when i put a simple integer 345

truemedia Over a year ago

Did you add the client-side validation javascript files to the view? Those two javascript files (jquery.validate.min.js and jquery.validate.unobtrusive.min.js) should be included in the MVC default project template.

Abhishek Over a year ago

Thanks sir, but by using [RegularExpression(@"^(([0-2]\d|[3][0-1])\.([0]\d|[1][0-2])\.[2][0]\d{2})$",ErrorMessage = "End Date should be in MM/dd/yyyy format")] it works for me

|

lukyer · Accepted Answer · 2017-03-08 16:06:30Z

13

Custom validation date format must be solved manually.

Client validation issues can occur because of MVC bug (even in MVC 5) in jquery.validate.unobtrusive.min.js which does not accept date/datetime format in any way. It is not caused by datepicker nor browsers. Unfortunately you have to solve it manually.

My finally working solution:

You have to include before:

@Scripts.Render("~/Scripts/jquery-3.1.1.js")
@Scripts.Render("~/Scripts/jquery.validate.min.js")
@Scripts.Render("~/Scripts/jquery.validate.unobtrusive.min.js")
@Scripts.Render("~/Scripts/moment.js")

You can install moment.js using:

Install-Package Moment.js

And then you can finally add fix for date format parser:

$(function () {
    $.validator.methods.date = function (value, element) {
        return this.optional(element) || moment(value, "DD.MM.YYYY", true).isValid();
    }
});

answered Mar 8, 2017 at 16:06

lukyer

8,0833 gold badges40 silver badges31 bronze badges

1 Comment

lukyer Over a year ago

for example in ... <head> <script> .. here </script> </head> ...

Keren Caelen · Accepted Answer · 2013-05-15 13:27:21Z

-5

You can use validation like:

[Required]
        [DisplayFormat(DataFormatString = "{0:d}")]
        public DateTime? ExpirationDate { get; set; }

I think it will work

answered May 15, 2013 at 13:27

Keren Caelen

1,4663 gold badges18 silver badges40 bronze badges

1 Comment

Abhishek Over a year ago

No sir page postback if i type 12345 and submit the form or any invalid date.

Collectives™ on Stack Overflow

Validate DateFormat In Mvc

3 Answers 3

6 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related