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

Question

我成功地展示了一个 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>

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

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

我试过这样的东西，但它没有在屏幕上显示任何东西(我可以确认正在调用代码):

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

我能做什么？

Answer 1

当您使用 mvc 的客户端验证时，jquery.validate.unobtrusive.js插件解析文档并配置 $.validator在jquery.validate.js .您不应尝试修改 $.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(); 删除它们