Add an error in ValidationSummary programmatically in data-ajax-success call

Question

I'm displaying, with success, a ValidationSummary containing the errors that the jQuery unobstrusive validator detects :

<form asp-controller="PlanningYearsEditModal" asp-action="EditPlanningYear" data-ajax="true" data-ajax-method="POST" data-ajax-success="onSuccess">
    <div id="content" class="modal-body">
        @Html.ValidationSummary(false, null, new { @class = "text-danger" })
        <table class="inner" style="width:100%" border=1>
            <tr class="azurbox rounded3 white bold">
                <td style="width:20%">@CommonResources.CommonField</td>
                <td style="width:80%">@CommonResources.CommonValue</td>
            </tr>
            <tr class="underline">
                <td>@Html.LabelFor(model => model.LabelFr)</td>
                <td>
                    @Html.EditorFor(model => model.LabelFr)
                    @Html.ValidationMessageFor(model => model.LabelFr, "*", new { @class = "text-danger" })
                </td>
            </tr>
            <tr class="underline">
                <td>@Html.LabelFor(model => model.LabelNl)</td>
                <td>
                    @Html.EditorFor(model => model.LabelNl)
                    @Html.ValidationMessageFor(model => model.LabelNl, "*", new { @class = "text-danger" })
                </td>
            </tr>
        </table>
    </div>
    <div class="modal-footer">
        @Html.HiddenFor(model => model.Id)
        <button type="button" class="btn" data-dismiss="modal">Close</button>
        <button type="submit" class="btn">Save changes</button>
        <div id="Results"></div>
    </div>
</form>

After these simple checks, I have to do manual integrity checks in my controller, who returns a JSON containing the errors. I would like to use the validator to be able to display these errors in the ValidationSummary. I could probably update the html code with jQuery manually, but it causes a lot of issues (sometimes the validation summary already exists, sometimes not, sometimes you just have to replace a few bullets, sometimes not, ...).

I feel like there is probably a way to do this in a clean way.

I tried something like this, but it doesn't display anything on screen (and I can confirm that is code is being called) :

var onSuccess = function (errors) {
    var errorArray = {};
    errorArray["LabelFr"] = 'Some error thrown by the controller';
    $('#myForm').validate().showErrors(errorArray);
};

What can I do ?

Answer 1

When you use mvc's client side validatiion, the jquery.validate.unobtrusive.js plug-in parses the document and configures the $.validator in jquery.validate.js . You should not attempt to modify the $.validator or call validate() .

Your @Html.ValidationSummary() generates a <div> (with a [data-valmsg-summary] attribute) which contains a <ul> element. To add the messages, you can simply add <li> elements containing the error message

var vs = $('[data-valmsg-summary]'); // get the div
if (errorArray.length > 0) {
    // update class name
    vs.addClass('validation-summary-errors').removeClass('validation-summary-valid');
}
$.each(errorArray, function(index, item) {
    // add each error
    vs.children('ul').append($('<li></li>').text(item));
});

If this is being called multiple times, and you do not want to display previously added errors, you can give the <li> elements a class name, say

vs.children('ul').append($('<li class="myerror"></li>').text(item));

and then remove them using vs.find('.myerror').remove();