Knockout js does not show error message in client validation
<p>I have a ASP.NET MVC3 Razor page together with Knockout js script.
The page runs fine and does client validation but inputboxes generated by Knockout js viewModel only validate while not showing error message. The other input fields do all validation and showing error message through [ValidationMesssageFor]. Knockout js generated input fields are validated via class name because the names attributes of those dynamic inputboxes are random on the fly. I really want to make the error messages for Knockout js generated inputboxes display.
Please have a look at the code below. Thanks.</p>

<pre><code>@using QuoteBoxKnockout.Infrastructure
@using QuoteBoxKnockout.Models
@model QuoteBoxKnockout.ViewModels.QuoteBoxViewModel

@{
    ViewBag.Title = "QuoteBox";
}

&lt;script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="@Url.Content("~/Scripts/jquery.tmpl.min.js")" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="@Url.Content("~/Scripts/knockout-1.3.0beta.debug.js")" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="@Url.Content("~/Scripts/knockout.jQueryUI-sortable.js")" type="text/javascript"&gt;&lt;/script&gt;

&lt;h2&gt;QuoteBox&lt;/h2&gt;

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "QuoteBoxForm" }))
{
    @Html.ValidationSummary(true)
    &lt;fieldset&gt;
        &lt;legend&gt;QuoteBoxViewModel&lt;/legend&gt;

        &lt;div class="editor-label"&gt;
            @Html.LabelFor(model =&gt; model.AlphaCode)
        &lt;/div&gt;
        &lt;div class="editor-field"&gt;
            @Html.EditorFor(model =&gt; model.AlphaCode)
            @Html.ValidationMessageFor(model =&gt; model.AlphaCode)
        &lt;/div&gt;

        &lt;div class="editor-label"&gt;
            @Html.LabelFor(model =&gt; model.StartDate)
        &lt;/div&gt;
        &lt;div class="editor-field"&gt;
            @Html.EditorFor(model =&gt; model.StartDate)
            @Html.ValidationMessageFor(model =&gt; model.StartDate)
        &lt;/div&gt;

        &lt;div class="editor-label"&gt;
            @Html.LabelFor(model =&gt; model.EndDate)
        &lt;/div&gt;
        &lt;div class="editor-field"&gt;
            @Html.EditorFor(model =&gt; model.EndDate)
            @Html.ValidationMessageFor(model =&gt; model.EndDate)
        &lt;/div&gt;

        &lt;div&gt;&lt;a href="" data-bind="click: addAge, enable: Ages().length &lt; maxAges"&gt;Add&lt;/a&gt;&lt;/div&gt;
        &lt;div class="editor-label" data-bind="template: { name: 'AgeInputBoxRowTemplate', data: Ages }, 
                        sortableList: viewModel.Ages"&gt;
        &lt;/div&gt;

        &lt;p&gt;
            &lt;input type="submit" value="Save" /&gt;
        &lt;/p&gt;
    &lt;/fieldset&gt;
}

&lt;div&gt;
    @Html.ActionLink("Back to List", "Index")
&lt;/div&gt;

&lt;script id="AgeInputBoxRowTemplate" type="text/x-jquery-template"&gt;
    {{each(i, age) $data}}
        &lt;div class="AgeRow" data-bind="template: { name: 'InputBoxTemplate', data: age }, sortableItem: age"&gt;
        &lt;/div&gt;
    {{/each}}
&lt;/script&gt;

&lt;script id="InputBoxTemplate" type="text/x-jquery-template"&gt;
    &lt;input type="text" data-bind="value: Age1, uniqueName: true" class="required" /&gt;
    &lt;input type="text" data-bind="value: Age2, uniqueName: true" class="required" /&gt;
    &lt;input type="text" data-bind="value: Age3, uniqueName: true" class="required" /&gt;
    &lt;input type="text" data-bind="value: Age4, uniqueName: true" class="required" /&gt;

    &lt;a href="#" data-bind="click: function() { viewModel.removeAge(this); }"&gt;Delete&lt;/a&gt;
&lt;/script&gt;

&lt;script type="text/javascript"&gt;
    $(function () {
        ko.applyBindings(viewModel);
    });

    var viewModel = {

        Ages: ko.observableArray(@Html.Json(@Model.Ages) || []),

        maxAges: 5,

        addAge: function() {
            viewModel.Ages.push(@Html.Json(new TravellerAge()));
        },

        removeAge: function(age) {
            ko.utils.arrayRemoveItem(viewModel.Ages, age);
        }
    };
&lt;/script&gt;
</code></pre>
