Render modal dialog from a PartialView, client side validation not working

While I am using JQuery to render a modal popup, and the popup content is read from a controller action with a partialview returned. The client side validation is not fired.

Here is a piece of sample code, I am using bootstrap modal to render the modal popup.

var url = "/Feed/Save/" + id;
        $.get(url, null, function (html) {
            $("#saveFeed").html(html);
            $("#saveFeedModal").modal('show');
        });

You need to add a line to parse unobtrusive validator,

            $.validator.unobtrusive.parse($("#saveFeed"));

After the modified the code, it all works fine,

var url = "/Feed/Save/" + id;
        $.get(url, null, function (html) {
            $("#saveFeed").html(html);
            $.validator.unobtrusive.parse($("#saveFeed"));
            $("#saveFeedModal").modal('show');
        });
Advertisements

One thought on “Render modal dialog from a PartialView, client side validation not working

  1. How about using form in partial view in such modals?
    Issues:
    1. bootstrap.css adds extra margin to forms => modal looks spoiled
    2. If error is thrown in controller [post] method how to pass error messages back to modal?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s