Date
If a property is a DateTime
then jQuery.Validate.Unobtrusive.Native applies the date validation method in jQuery Validation. This validation will also be applied for Nullable<DateTime>
s. DateTime
s also have the required validation method in jQuery Validation applied (as a DateTime
in .NET always has a value).
Here's the model, note we have a DateTime and a Nullable DateTime:
using System.ComponentModel.DataAnnotations; namespace jQuery.Validation.Unobtrusive.Native.Demos.Models { public class DateModel { public DateTime DateTime { get; set; } public DateTime? NullableDateTime { get; set; } } }
Here's the view (which uses the model):
@model jQuery.Validation.Unobtrusive.Native.Demos.Models.DateModel @using (Html.BeginForm()) { <div class="row"> @Html.LabelFor(x => x.DateTime, "DateTime - a date must be entered:") @Html.TextBoxFor(x => x.DateTime, true) </div> <div class="row"> @Html.LabelFor(x => x.NullableDateTime, "Nullable DateTime - only dates can be entered:") @Html.TextBoxFor(x => x.NullableDateTime, true) </div> <div class="row"> <button type="submit" class="btn btn-default">Submit</button> <button type="reset" class="btn btn-info">Reset</button> </div> }
Here's the (relevant parts) of the controller. Note the DateTime being initialised with todays date:
using System; using System.Web.Mvc; using jQuery.Validation.Unobtrusive.Native.Demos.Models; namespace jQuery.Validation.Unobtrusive.Native.Demos.Controllers { public class DemoController : Controller { // ... public ActionResult Date() { return View(new DateModel { DateTime = DateTime.Today } ); } // ... } }
Here's the HTML that the view generates (nb DateTime has been initialised to a value):
<form action="/Demo/Date" method="post"> <div class="row"> <label for="DateTime">DateTime - a date must be entered:</label> <input data-msg-date="The field DateTime must be a date." data-msg-required="The DateTime field is required." data-rule-date="true" data-rule-required="true" id="DateTime" name="DateTime" type="text" value="02/08/2013 00:00:00" /> </div> <div class="row"> <label for="NullableDateTime">Nullable DateTime - only dates can be entered:</label> <input data-msg-date="The field NullableDateTime must be a date." data-rule-date="true" id="NullableDateTime" name="NullableDateTime" type="text" value="" /> </div> <div class="row"> <button type="submit" class="btn btn-default">Submit</button> <button type="reset" class="btn btn-info">Reset</button> </div> </form>
Here's the JavaScript that initialises the validation:
$("form").validate({ submitHandler: function (form) { alert("This is a valid form!"); } });
It's worth noting that the jQuery Validation documentation says of the date validation method:
"This method should not be used, since it relies on the new Date
constructor, which behaves very differently across browsers and locales. Use dateISO instead or one of the locale specific methods (in localizations/ and additional-methods.js)."
If you have a modern browser you should be able to rely on the date constructor to happily parse ISO 8601 date strings. However, if you want to patch the jQuery Validation date validation to be locale specific regardless then take a look here.