I am new to ASP.Net MVC 3, facing some issues while trying to implementing client side unobtrusive validation for a editor template I have created for showing date in a custom way.
UI
I need to show date in a three texbox UI format as
I have put up a EditorTemplate for displaying the date in three parts as
@model DateTime?
<table class="datetime">
<tr>
<td>@Html.TextBox("Day", (Model.HasValue ? Model.Value.ToString("dd") : string.Empty)) </td>
<td class="separator">/</td>
<td>@Html.TextBox("Month", (Model.HasValue ? Model.Value.ToString("MM") : string.Empty))</td>
<td class="separator">/</td>
<td>@Html.TextBox("Year", (Model.HasValue ? Model.Value.ToString("yyyy") : string.Empty))</td>
</tr>
<tr>
<td class="label">dd</td>
<td/>
<td class="label">mm</td>
<td/>
<td class="label">yyyy</td>
</tr>
</table>
Model
I have to bind a Date of Birth field which is a property in a subobject of my model to this property, in this structure
MyModel
--> MySubModel
--> DateOfBirth
public class MySubModel
{
...
[DataType(DataType.Date)]
[Display(Name = "Date of birth")]
[DateTimeClientValidation()]
public DateTime DateofBirth { get; set; }
...
}
Clientside Validation
I have put up a custom validation attribute which implements IClientValidatable as
public class DateTimeClientValidationAttribute : ValidationAttribute, IClientValidatable
{
...
public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
{
List<ModelClientValidationRule> clientRules = new List<ModelClientValidationRule>();
//Combined date should be valid
ModelClientValidationRule validDateRule = new ModelClientValidationRule
{
ErrorMessage = "Please enter a valid date.",
ValidationType = "validdate"
};
validDateRule.ValidationParameters.Add("dayelement", metadata.PropertyName + ".Day");
validDateRule.ValidationParameters.Add("monthelement", metadata.PropertyName + ".Month");
validDateRule.ValidationParameters.Add("yearelement", metadata.PropertyName + ".Year");
clientRules.Add(validDateRule);
return clientRules;
}
...
}
I am trying to emit the element names of Day, Month & Year textboxes here to client side validation elements, so that I will write a client side jquery validation method and adapter later which would consume those elements and do the validation at the client side.
View
Now, to use this editor template, I put in View the following lines
@model MyModel
...
<tr>
<td class="editor-label">
@Html.LabelFor(m => m.MySubModel.DateofBirth)
</td>
<td class="editor-field">
@Html.EditorFor(m => m.MySubModel.DateofBirth)
@Html.ValidationMessageFor(m => m.MySubModel.DateofBirth)
</td>
</tr>
...
Added all relevant jquery validation files in the view as references
Questions
Thanks for being patient to read out all this, and for the answers
After some effort, I made the control to work, putting in if it is helpful to anybody out there.
The first point is to have the control defined as
@model DateTime?
<table class="datetime">
<tr>
<td>@Html.TextBox("", (Model.HasValue ? Model.Value.ToString("dd") : string.Empty)) </td>
<td class="separator">/</td>
<td>@Html.TextBox("", (Model.HasValue ? Model.Value.ToString("MM") : string.Empty))</td>
<td class="separator">/</td>
<td>@Html.TextBox("", (Model.HasValue ? Model.Value.ToString("yyyy") : string.Empty))</td>
</tr>
<tr>
<td class="label">dd</td>
<td/>
<td class="label">mm</td>
<td/>
<td class="label">yyyy</td>
</tr>
</table>
Make sure, you give empty strings as name to all the three textboxes, this forces the MVC framework to generate same name corresponding to Model DateofBirth for all the three textboxes in the client side. Also, unobtrusive javascript validation parameters would be generated for the first textbox in the list, since it is the first occurence of a edit control with the name of the model.
On the client side, on any event on any of these textboxes fires all the relevant validation events, since all these 3 textboxes have the same name.
On top of the regular validations like required,.... we have to write a custom client validation routine which would combine all these three values and checks whether the combined value forms a valid date. This can be achieved as in the answer given by Jeff.