Can I use ValidationSummary on a PartialView returned by ajax call?

Question

I have an asp.net MVC application which uses jquery unobtrusive validation. I would like to use the Html.ValidationSummary on a form that is generated as described below.

Is there any hack or workaround I can use to get Html.ValidationSummary to work on forms that are generated via an ajax call that fetches and displays a partial view?

I use ajax to call a Controller action which returns a partial view. I then set the html of a div to the ajax call result. The ajax call looks like this:

$.ajax({
            type: "GET",
            url: '/MyDomain/GetPartialView?myId=' + myId,
            cache: false,
            dataType: "html",
            success: function (responseText) {
                $tab.html(responseText);
                $tab.find('form').validate();
            }
   });

And the Controller Action looks like this:

public ActionResult GetPartialView(long myId)
{
    model = GetModel(myId);
    return PartialView("_MyPartialView", model);
}

The PartialView is a plain old *.cshtml page that generates a form, like below, and on that form I have a (non-functioning) ValidationSummary along with a bunch of inputs. Is there any way I can make it function? Right now jquery unobtrusive validation works, but it shows the error message next to each invalid input. I would like to have the page display error messages in the ValidationSummary instead.

@using (Html.BeginForm("MyAction", "MyController", FormMethod.Post,     new { enctype = "multipart/form-data" }))
{
    <span id="validation-errors" class="validation-summary-errors">@Html.ValidationSummary(false, "Submit was unsuccessful. Please correct the errors and try again.")</span>

    <div>@Html.EditorFor(m => m.MyField)</div>
}

What do your mean Right now jquery unobtrusive validation works? Your dynamically loading the form and you will not get any validation unless you reparse the validator in the ajax success callback. — user3559349
@StephenMuecke, validation is working, I am seeing the client-side validation messages. How would I "reparse the validator"? I am calling .validate() on the form, I suppose that is what does it? — Tom Regan
No you will not. And there is no difference between using ValidationSumary() and ValidationMessageFor() as far as client side validation is concerned (and certainly ViewData has nothing to do with it). Refer this answer for how to reparse the validator — user3559349

Tom Regan Tom Regan · Accepted Answer · 2017-08-15T22:12:18

@StephenMuecke, if you want to post your comment as an answer I'll use that and delete this one. The answer as stated by @StephenMuecke is to reparse the validator. My ajax call now looks like this, the 2 added lines of code fixes the issue:

$.ajax({
        type: "GET",
        url: '/MyDomain/GetPartialView?myId=' + myId,
        cache: false,
        dataType: "html",
        success: function (responseText) {
            $tab.html(responseText);
            var $form = $tab.find('form');
            $form.data('validator', null);
            $.validator.unobtrusive.parse($form);
        }
   });

Can I use ValidationSummary on a PartialView returned by ajax call?

1 Answers