ASP.NET MVC 3 unobtrusive jQuery client-side validation with child collections

Question

Related questions:

• ASP.NET MVC 3: Generate unobtrusive validation when BeginForm is on the layout
• ASP.NET MVC 3 unobtrusive client-side validation with dynamic content

I have an ASP.NET MVC view rendering a collection of items which the user can add to:-

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MySite.Models.Parent>" %>
<% using (Html.BeginForm()) { %>
    <%: Html.ValidationSummary(true) %>
    <%: Html.HiddenFor(model => model.Id) %>
    <table>
        <thead>
            <tr>
                ...
                <th>Value</th>
            </tr>
        </thead>
        <tbody>
            <% foreach (var child in Model.Children)
               {
                   Html.RenderPartial("ChildRow", child );
               } %>
        </tbody>
    </table>
    <p>
        <input type="submit" value="Save" />
        <%= Html.ActionLink<MyController>(x => x.ChildRow(), "Add another...", new { @class = "addRow" }) %>
    </p>
<% } %>

The "ChildRow" partial is as follows:-

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MySite.Models.Child>" %>
<tr class="editor-row">
    <td>
        <%  Html.EnableClientValidation(true);
            using (Html.BeginCollectionItem("Children")) { %>
        <%: Html.HiddenFor(model => model.Id)%>
    </td>
    <td>
        <%: Html.EditorFor(model => model.Value)%>
        <%: Html.ValidationMessageFor(model => model.Value)%>
        <% } %>
    </td>
</tr>

I'm using jQuery to grab the partial representing the row:-

$("a.addRow").live("click", function () {
    $.ajax({
        url: this.href,
        cache: false,
        success: function (html) {
            $(this).parents("form:first").children("table:first tbody:last").append(html);
            $.validator.unobtrusive.parse("form");
        }
    });
    return false;
});

The problem I'm having is that the client-side validation doesn't work on rows that get added by jQuery. As you can see from my script, I'm running the validator over the form after the ajax call. As far as I can tell from looking around, the problem is that the Html.BeginForm() call isn't on the ajax partial, and as such the validation attributes are not being added to the input elements. i.e. if I view the markup after adding a row:-

Inputs that existed at page load look like:-

<input name="Children[0a197c09-470c-4ab4-9eef-2bcc5f0df805].Value"
  class="text-box single-line" id="Children_0a197c09-470c-4ab4-9eef-2bcc5f0df805__Value"
  type="text" data-val-required="The Value field is required." data-val="true" value="Test"/>

Inputs that were added via ajax look like:-

<input name="Children[aa5a21b2-90bc-4e06-aadc-1f2032a121aa].Value"
  class="text-box single-line" id="Children_aa5a21b2-90bc-4e06-aadc-1f2032a121aa__Value"
  type="text" value=""/>

Obviously due to the nature of the form I cannot move the Html.BeginForm call onto my partial view. As the page is being loaded via ajax, neither can I hack the FormContext of my partial.

Is there another way I can enable client-side validation?

EDIT

As per counsellorben's answer below, I set the FormContext and now the attributes are rendering correctly, however the validation still isn't working (if I add a new row and leave the textbox blank, the first the application notices is when my breakpoint on the Edit POST action is hit).

I did some testing, and the $.validator.unobtrusive.parse function is definitely being called, the parseElement function is definitely being called the correct number of times for the new number of inputs in the table, and the line "info.attachValidation();" further down the parse function is definitely being hit. That's as far as I've got. Still testing.

Kenon

Have you tried setting the missing attributes on the newly added row via jquery youself prior to running validation? – Pimental

Good starting point. I'll try that. – Kenon

Answer 1

The problem you are experiencing is that no FormContext exists when the server is creating your new row. A FormContext must exist for unobtrusive validation attributes to be added to the generated HTML. Add the following to the top of your partial view:

if (this.ViewContext.FormContext == null) 
{
    this.ViewContext.FormContext = new FormContext(); 
}

counsellorben

Ketose

Ok, I'm getting the attributes now, but it's still not working. Maybe something to do with the javascript? – Kenon

This worked for me but I had to make sure the form tags were outside the partial view – Vostok

Answer 2

As an answer to the second part of my question, apparantly you can't call jquery.validate.unobtrusive.parse on a form twice. If the form already has a validator, it is not replaced.

Going to give accepted answer to counsellorben because his bit was by far the hard bit :D

EDIT

Ooh, seems I wasn't the first to find it either:

http://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/

Kenon

Iain, while I appreciate the solution at xhalent.wordpress.com/2011/01/24/…, you can achieve the same result with one line of code right before $.validator.unobtrusive.parse(): $.data($("form")[0], 'validator', false); – Ketose

Iain, on reflection, the solution really requires three lines of code: $("form").each(function () { $.data($(this)[0], 'validator', false); }); – Ketose

Answer 3

Add unobstrusive like these lines:

1) $.validator.unobtrusive.parse($('#yourformid'));

2) var $form1 = $('#workOrderDetails');

3) if ($form1.valid()) {  //your ajax or your code comes here }

I assume that you have added validation summary or validationmessagefor for messages.

Tumescent