Element not being validated w/ unobtrusive validation after AJAX and dynamic creation using MVC 3 and jQuery

Here's my problem...

I have a page that initially renders and displays an AJAX form created using Ajax.BeginForm. Some criteria is entered and the AJAX form is posted. A partial view is returned which contains an HTML form created using Html.BeginForm.

So far so good... Everything to this point works fine. My unobtrusive client validation works great on the elements created from the partial view. My problem happens when I now try to create some dynamic input elements (via jQuery) and insert/append them into the form created by the partial view. I cannot get any unobtrusive client validation to occur on my dynamically created elements.

I have tried: - cloning existing elements, modifying their ids/names and appending them in the DOM. - creating html strings and inserting them in the DOM.

After each insert of the dynamic element I have tried calling: - $.validator.unobtrusive.parseElement() [new element] - $.validator.unobtrusive.parse() [new container, document, etc] - $.validator.unobtrusive.parseDynamicContent() [plug-in]

Here are the jQuery code details...

$开发者_开发百科("#insert").live("click", function () {
    var html = "<input type='text' value='' name='CustomerNominationVolume' id='CustomerNominationVolume' data-val-required='The Nomination (Dth) field is required.' data-val-number='The field Nomination (Dth) must be a number.' data-val='true' /><br />"
    html += "<span class='field-validation-valid' data-valmsg-replace='true' data-valmsg-for='CustomerNominationVolume'></span>";
    $("#new").html(html);
});

$("#parse").live("click", function () {
    $.validator.unobtrusive.parse(document);
});

$("#validate").live("click", function () {
    var element = $("#CustomerNominationVolume");
    var form = $(element).first().closest('form');
    form.validate().element(element);
});

Any help would be GREATLY appreciated!

EDIT: After doing some additional research and testing I went back to this solution to determine why it wasn't working for me. As it turns out I was inserting new input elements that were part of a list. Therefore, the name of my new elements would look similar to this: something[0].id, something[1].id, etc...

These names caused the $.validator.unobtrusive.parseDynamicContent() function to fail on this line: $('[name=' + elname + ']').rules("add", args);

I simply changed this to $("[name='" + elname + "']").rules("add", args);

Everything is now working fine...

Once you've added your dynamic content, then call:

    $("form").removeData("validator");
    $("form").removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse("form");

Where "$('form')" is a selector for your form.

That should do the trick.