1

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>
}
Tom Regan
  • 3,580
  • 4
  • 42
  • 71
  • 1
    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. –  Aug 15 '17 at 21:27
  • @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 Aug 15 '17 at 21:33
  • 2
    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](https://stackoverflow.com/questions/31768946/required-field-validations-not-working-in-jquery-popup-mvc-4/31769058#31769058) for how to reparse the validator –  Aug 15 '17 at 21:38
  • Can you post code from the partial view? – Chris Gong Aug 15 '17 at 21:53

1 Answers1

1

@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);
        }
   });
Tom Regan
  • 3,580
  • 4
  • 42
  • 71