ASP.net MVC 3 Unobtrusive Client Validations in JQuery Modal Pop up Issue

When I tried to implement ASP.net MVC 3 Unobtrusive Client Validations in the application, the rendered html didn't generate the span tags which are generated by JQuery.

I have only got following rendering html and I used JQuery modal popup as a container for my partial View.

<input data-val="true" data-val-required="The City field is required." id="City" name="City" type="text" value="Seattle" />

However, when I used Unobtrusive Client validation with out JQuery Modal pop up it works correct开发者_如何学JAVAly as follows in same application.

<div class="editor-field">
  <input data-val="true" data-val-required="The City field is required." id="City" name="City" type="text" value="Seattle" />
  <span class="field-validation-valid" data-valmsg-for="City" data-valmsg-replace="true"></span>
</div>

Is there any thing that I need to implement when I use Unobtrusive Client validations in JQuery Modal Popup?

JQuery Popup Code

 $(document).ready(function () {
        $('#actionPanelDialogs div').dialog({
            autoOpen: false,
            modal: true,
            width: 700,
            appendToBody: true
        });


        $('#actions a').click(function (event) {
            event.stopPropagation();
            event.preventDefault();
            var link = $(this);
            var action = link.attr('href');
            var dialogDivId = link.attr('rel');

            var dialogDiv = $('#' + dialogDivId);

            $.get(action, null, function (data) {
                dialogDiv.html(data);

                dialogDiv.dialog('open');                

            });
            return false;
        });
 });

---

You have to manually trigger a parse of any new elements added to the DOM.

jQuery.validator.unobtrusive.parse("#modalPopup"); 

If you are using jQuery UI

$( ".selector" ).dialog({
   open: function(event, ui) {
      jQuery.validator.unobtrusive.parse(ui);
   }
});

---

Found the problem,

I've used form html to create form element as follows.

<form  action="@Url.Action("Create", "Person")" enctype="multipart/form-data" method="post" id="contactForm">

When I used Html helper it worked correctly.

@{using (Html.BeginForm("Create", "Person", new { enctype = "multipart/form-data", id = "contactForm" }))

---

For anyone using bootstrap modals use the following code:

$('#myModal').on('shown.bs.modal', function () {
    jQuery.validator.unobtrusive.parse($(this));
})

Thanks to Josh for the guts of it.

---

Tried all approaches and this is what worked for me:

$(".showModal").click(function () {
            var id = $(this).attr("data-id");
            $("#modal").load("/Controller/Action?id=" + id, function () {
                $("#modal").modal();
                $.validator.unobtrusive.parse($("#modal"));
            })
        });