How to validate Date in ClientSide using FluentValidation? - asp.net-mvc

Question

Question
The below code is working fine Server side and not Client side. Why ?
When I submit the form, control goes to BeAValidDate function to check the date is valid or not. Is there any way to Validate the date without going to server using Fluent Validation?
Scripts
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="jquery.validate.unobtrusive.js" type="text/javascript"></script>
Model
public class PersonValidator : AbstractValidator<Person>
{
public PersonValidator()
{
RuleFor(x => x.FromDate)
.NotEmpty()
.WithMessage("Date is required!")
.Must(BeAValidDate)
.WithMessage("Invalid Date");
}
private bool BeAValidDate(String value)
{
DateTime date;
return DateTime.TryParse(value, out date);
}
}
Controller
public class PersonController : Controller
{
public ActionResult Index()
{
return View(new Person { FromDate = DateTime.Now.AddDays(2).ToString()});
}
[HttpPost]
public ActionResult Index(Person p)
{
return View(p);
}
}
View
#using (Html.BeginForm("Index", "Person", FormMethod.Post))
{
#Html.LabelFor(x => x.FromDate)
#Html.EditorFor(x => x.FromDate)
#Html.ValidationMessageFor(x => x.FromDate)
<input type="submit" name="Submit" value="Submit" />
}

Answer 1

Trick using Greater Then Or Equal To Validator. Works for me.
Global.asax - Application Start Event
FluentValidationModelValidatorProvider.Configure(x =>
{
x.Add(typeof(GreaterThanOrEqualValidator),
(metadata, Context, rule, validator) =>
new LessThanOrEqualToFluentValidationPropertyValidator
(
metadata, Context, rule, validator
)
);
});
Model
[Validator(typeof(MyViewModelValidator))]
public class MyViewModel
{
[Display(Name = "Start date")]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}",
ApplyFormatInEditMode = true)]
public DateTime StartDate { get; set; }
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}",
ApplyFormatInEditMode = true)]
public DateTime DateToCompareAgainst { get; set; }
}
Rule
public class MyViewModelValidator : AbstractValidator<MyViewModel>
{
public MyViewModelValidator()
{
RuleFor(x => x.StartDate)
.GreaterThanOrEqualTo(x => x.DateToCompareAgainst)
.WithMessage("Invalid start date");
}
}
FluentValidationPropertyValidator
public class GreaterThenOrEqualTo : FluentValidationPropertyValidator
{
public GreaterThenOrEqualTo(ModelMetadata metadata,
ControllerContext controllerContext,
PropertyRule rule,
IPropertyValidator validator)
: base(metadata, controllerContext, rule, validator)
{
}
public override IEnumerable<ModelClientValidationRule>
GetClientValidationRules()
{
if (!this.ShouldGenerateClientSideRules())
{
yield break;
}
var validator = Validator as GreaterThanOrEqualValidator;
var errorMessage = new MessageFormatter()
.AppendPropertyName(this.Rule.GetDisplayName())
.BuildMessage(validator.ErrorMessageSource.GetString());
var rule = new ModelClientValidationRule{
ErrorMessage = errorMessage,
ValidationType = "greaterthanorequaldate"};
rule.ValidationParameters["other"] =
CompareAttribute.FormatPropertyForClientValidation(
validator.MemberToCompare.Name);
yield return rule;
}
}
Controller Action Method
public ActionResult Index()
{
var model = new MyViewModel
{
StartDate = DateTime.Now.AddDays(2),
DateToCompareAgainst = default(DateTime) //Default Date
};
return View(model);
}
[HttpPost]
public ActionResult Index(Practise.Areas.FluentVal.Models.MyViewModel p)
{
return View(p);
}
View
#using (Html.BeginForm("Index", "Person", FormMethod.Post,
new { id = "FormSubmit" }))
{
#Html.Hidden("DateToCompareAgainst", Model.DateToCompareAgainst);
#Html.LabelFor(x => x.StartDate)
#Html.EditorFor(x => x.StartDate)
#Html.ValidationMessageFor(x => x.StartDate)
<button type="submit">
OK</button>
}
Script
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="jquery.validate.unobtrusive.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
$.validator.unobtrusive.adapters.add('greaterthanorequaldate',
['other'], function (options) {
var getModelPrefix = function (fieldName) {
return fieldName.substr(0, fieldName.lastIndexOf(".") + 1);
};
var appendModelPrefix = function (value, prefix) {
if (value.indexOf("*.") === 0) {
value = value.replace("*.", prefix);
}
return value;
}
var prefix = getModelPrefix(options.element.name),
other = options.params.other,
fullOtherName = appendModelPrefix(other, prefix),
element = $(options.form).find(":input[name=" + fullOtherName +
"]")[0];
options.rules['greaterthanorequaldate'] = element;
if (options.message != null) {
options.messages['greaterthanorequaldate'] = options.message;
}
});
$.validator.addMethod('greaterthanorequaldate',
function (value, element, params) {
var date = new Date(value);
var dateToCompareAgainst = new Date($(params).val());
if (isNaN(date.getTime()) || isNaN(dateToCompareAgainst.getTime())) {
return false;
}
return date >= dateToCompareAgainst;
});
})(jQuery);
</script>

Answer 2

There are things I don't understand about your settings and about what is not working. Do you mean the verification that the date must be valid is not working, or that the fact the date is required is not working?
Fluent validation is able to emit code for unobtrusive validation too, so the required constraint should work properly.
The fact that the date is valid is completely another story. If you specify your FromDate as a DateTime (have you declared it as a DateTime or as a string?) the verification of correctness of date is AUTOMATICALLY performed by other validators included in the Mvc framework, so you dont need to repeat it in the fluent validation rules. However, before Mvc4 this validation check were performed ONLY on the server side. With Mvc 4 the Asp.net Mvc Team fixed this problem and extended the check also on the client side.
However, on the client side, everything work propery only for the en-US date format, , since unobtrusive validation doesn't handle globalization. If you need date in other cultures you need to use the Globalize library, and you need to set up globalization on the client side. If you are interested to globalization you may see this post of my blog.
To add automatic Date correction also to Mvc 3. You must define an extended ClientDataTypeModelValidatorProvider like the one of Mvc4. Below the code:
public class ClientDataTypeModelValidatorProviderExt : ClientDataTypeModelValidatorProvider
{
public static Type ErrorMessageResources { get; set; }
public static string NumericErrorKey { get; set; }
public static string DateTimeErrorKey { get; set; }
private static readonly HashSet<Type> _numericTypes = new HashSet<Type>(new Type[] {
typeof(byte), typeof(sbyte),
typeof(short), typeof(ushort),
typeof(int), typeof(uint),
typeof(long), typeof(ulong),
typeof(float), typeof(double), typeof(decimal)
});
private static bool IsNumericType(Type type)
{
Type underlyingType = Nullable.GetUnderlyingType(type); // strip off the Nullable<>
return _numericTypes.Contains(underlyingType ?? type);
}
internal sealed class NumericModelValidator : ModelValidator
{
public NumericModelValidator(ModelMetadata metadata, ControllerContext controllerContext)
: base(metadata, controllerContext)
{
}
public override IEnumerable<ModelClientValidationRule> GetClientValidationRules()
{
ModelClientValidationRule rule = new ModelClientValidationRule()
{
ValidationType = "number",
ErrorMessage = MakeErrorString(Metadata.GetDisplayName())
};
return new ModelClientValidationRule[] { rule };
}
private static string MakeErrorString(string displayName)
{
// use CurrentCulture since this message is intended for the site visitor
return String.Format(CultureInfo.CurrentCulture, ErrorMessageResources.GetProperty(NumericErrorKey, System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static).GetValue(null, null) as string, displayName);
}
public override IEnumerable<ModelValidationResult> Validate(object container)
{
// this is not a server-side validator
return Enumerable.Empty<ModelValidationResult>();
}
}
internal sealed class DateTimeModelValidator : ModelValidator
{
public DateTimeModelValidator(ModelMetadata metadata, ControllerContext controllerContext)
: base(metadata, controllerContext)
{
}
public override IEnumerable<ModelClientValidationRule> GetClientValidationRules()
{
ModelClientValidationRule rule = new ModelClientValidationRule()
{
ValidationType = "globalizeddate",
ErrorMessage = MakeErrorString(Metadata.GetDisplayName())
};
return new ModelClientValidationRule[] { rule };
}
private static string MakeErrorString(string displayName)
{
// use CurrentCulture since this message is intended for the site visitor
return String.Format(CultureInfo.CurrentCulture, ErrorMessageResources.GetProperty(DateTimeErrorKey, System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static).GetValue(null, null) as string, displayName);
}
public override IEnumerable<ModelValidationResult> Validate(object container)
{
// this is not a server-side validator
return Enumerable.Empty<ModelValidationResult>();
}
}
public override IEnumerable<ModelValidator> GetValidators(ModelMetadata metadata, ControllerContext context)
{
if (metadata == null)
{
throw new ArgumentNullException("metadata");
}
if (context == null)
{
throw new ArgumentNullException("context");
}
List<ModelValidator> res = null;
if (NumericErrorKey == null || ErrorMessageResources == null)
res = base.GetValidators(metadata, context).ToList();
else
{
res = new List<ModelValidator>();
if (IsNumericType(metadata.ModelType))
{
res.Add(new NumericModelValidator(metadata, context));
}
}
if ( (metadata.ModelType == typeof(DateTime) || metadata.ModelType == typeof(DateTime?)))
{
if(ErrorMessageResources != null && DateTimeErrorKey != null)
res.Add(new DateTimeModelValidator(metadata, context));
}
return res;
}
}
Then in the global.asax you must substititute the standard one with this:
var old = ModelValidatorProviders.Providers.Where(x => x is ClientDataTypeModelValidatorProvider).FirstOrDefault();
if (old != null) ModelValidatorProviders.Providers.Remove(old);
ModelValidatorProviders.Providers.Add(new ClientDataTypeModelValidatorProviderExt());
Now you have to add the javascript snipped that do the control on the client side:
$.validator.addMethod(
"globalizeddate",
function (value, element, param) {
if ((!value || !value.length) && this.optional(element)) return true; /*success*/
var convertedValue = Globalize.parseDate(value);
return !isNaN(convertedValue) && convertedValue;
},
"field must be a date/time"
);
There I used the Globalize function to verify correct date. Install it. It is the only way to have a date frormat compatible with the .net format. Moreover it works in all .net cultures. Using a standard javascript date parsing, is not compatible with the formats accepted by .Net in some browsers.

Answer 3

In MVC 3 below code should work fine.
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
#using (Html.BeginForm("Index", "Person", FormMethod.Post))
{
#Html.LabelFor(x => x.FromDate)
#Html.EditorFor(x => x.FromDate)
#Html.ValidationMessageFor(x => x.FromDate)
<input type="submit" name="Submit" value="Submit" />
}
Simple working Example in MVC 4
_Layout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
</html>
View:
#model Mvc4Test.Models.Person
#{
ViewBag.Title = "test";
}
<h2>test</h2>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Part</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Name)
#Html.ValidationMessageFor(model => model.Name)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
For more details.