Here's the thing. Unobtrusive client side validation uses HTML5 data-* attributes that are generated on your <input>
fields. When you remove the UIHint
, your custom template is no longer used and if you inspect the generated markup you will see that the <input>
field has data-*
attributes on it:
<input class="input-validation-error text-box single-line" data-val="true" data-val-length="Maximum 0 characters exceeded" data-val-length-max="50" data-val-regex="Minimum 5 characters required" data-val-regex-pattern="^.{5,}$" id="Title" name="Title" type="text" value="1" />
Now if you put your UIHint
and look at the generated HTML you will see:
<input class="txt" id="Title" name="Title" type="text" value="some title" />
Alright, this explains why your code doesn't work.
Now you probably wanna know why there are no data-* attributes in your template? Because the HTML helpers such as Html.TextBoxFor generate those attributes only if they are placed inside a form. So you have to cheat and manually instantiate a FormContext to trick the helper into thinking that it is used inside a form. Actually there's an Html.BeginForm
but this form is in your main view and inside the template the helper doesn't know that. Call it a bug or whatever but it's how things are.
So you could simply create a FormContext in your template:
@{
this.ViewContext.FormContext = new FormContext();
}
@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { @class="txt" })
and now your <input>
field will have the necessary data-* attributes on it so that unobtrusive validation works as expected.