在 data-ajax-success 调用中以编程方式在 ValidationSummary 中添加错误答案

【问题标题】：Add an error in ValidationSummary programmatically in data-ajax-success call在 data-ajax-success 调用中以编程方式在 ValidationSummary 中添加错误
【发布时间】：2018-03-27 09:34:53
【问题描述】：

我成功地显示了一个 ValidationSummary，其中包含 jQuery 非干扰验证器检测到的错误：

<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>

在这些简单的检查之后，我必须在我的控制器中进行手动完整性检查，控制器返回一个包含错误的JSON。我想使用验证器能够在 ValidationSummary 中显示这些错误。我可能可以手动使用jQuery 更新html代码，但这会导致很多问题（有时验证摘要已经存在，有时不存在，有时您只需要替换几个项目符号，有时不，...）。

我觉得可能有办法以干净的方式做到这一点。

我尝试了类似的方法，但它没有在屏幕上显示任何内容（我可以确认正在调用代码）：

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

我能做什么？

【问题讨论】：

不知道为什么您认为为您添加额外错误的<li> 元素是一个问题（并且@Html.ValidationSummary() 生成的<div> 和<ul> 元素始终存在）
我不这么认为，在没有错误的情况下，有一个div，其类为validation-summary-valid text-danger，然后替换为一个名为-danger validation-的类摘要错误，其中 jquery unobtrusive validatiob 检测到错误。
如果返回错误，则使用 $('[data-valmsg-summary]') 获取元素，将类设置为 "validation-summary-errors" 并简单地 .append() .append() <li> 中的消息 - 只需几行代码跨度>
var vs = $('[data-valmsg-summary]'); $.each(errorArray, function(index, item) { vs.children('ul').append($('<li></li>').text(item)); }); if (errorArray.length > 0) {vs.addClass('validation-summary-errors').removeClass('validation-summary-valid');}
在上面的代码中使用类似.append($('<li class="custom"></li>')的东西，这样你就可以删除你之前添加的任何东西（我假设这就是你的意思）

标签： javascript c# jquery ajax asp.net-core-mvc

【解决方案1】：

当你使用mvc的客户端验证时，jquery.validate.unobtrusive.js插件会解析文档并在jquery.validate.js中配置$.validator。您不应尝试修改$.validator 或致电validate()。

您的@Html.ValidationSummary() 生成一个<div>（带有[data-valmsg-summary] 属性），其中包含一个<ul> 元素。要添加消息，您只需添加包含错误消息的<li> 元素

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));
});

如果这被多次调用，并且您不想显示以前添加的错误，您可以给 <li> 元素一个类名，比如

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

然后使用vs.find('.myerror').remove();删除它们

【讨论】：