jquery - 在没有 key 的情况下将错误添加到 JQuery 不引人注目的验证摘要

Question

我有一个表单，它使用不显眼的 JQuery 验证以及验证摘要。效果很好。但是，此表单执行 Ajax POST，返回 JSON 结果。如果结果 == true，那么我继续。但是，如果 JSON 结果返回消息数组，我想触发表单验证以更新字段。返回错误如下:

{
    "errors": [ 
       { "key" : "NameFirst", "message": "This is the message" },
       { "key" : "NameLast", "message": "This is the message" } 
     ]
}

我解析 JSON 结果并调用 showErrors()，如下所示:

for (var j = 0; j < response.errors.length; j++) {
    var key = response.errors[j].key;
    var error = {};
    error[key] = response.errors[j].message;
    $form.data('validator').showErrors(error);
}

这会正确突出显示字段，但不会更新验证摘要。我怎样才能更新它？

此外，有时错误是通用的，不会映射到模型中的特定属性/字段。在这种情况下，它们将返回空键，例如:

{
     "errors": [ 
        { "key" : null, "message": "This is the message" },
        { "key" : null, "message": "This is the other message" }, 
        { "key" : "NameFirst", "message": "This is the message" },
        { "key" : "NameLast", "message": "This is the message" } 
      ]
 }

我无法对这些调用 showErrors，因为它们没有映射到字段标识符。一旦我被告知如何更新摘要，我确信我可以将项目附加到通用消息列表中，但我愿意接受其他建议。谢谢!

更新

这是我最终所做的，看起来效果很好。除了对有效的键控错误调用 showErrors 之外，我还必须手动构建摘要:

var $summary = $form.find("[data-valmsg-summary=true]")
                    .addClass("validation-summary-errors")
                    .removeClass("validation-summary-valid");
var $ul = $summary.find("ul").empty();

var error = {};
$.each(response.errors, function () {
    if (this.key)
        error[this.key] = this.message;
    $("<li />").html(this.message).appendTo($ul);
});
$form.validate().showErrors(error);

我希望这对其他人有帮助。

Answer 1

我需要将自己的自定义错误消息添加到摘要列表中。经过一天左右的仔细阅读 jQuery 验证和非侵入式验证源代码后，我最终使用了解决方案。

首先我声明了我的表格

@using (Html.BeginForm(null, null, FormMethod.Post, new {id = "formA"}))
{
    @Html.ValidationSummary()
           .....
           .....

设置 id 很重要，因为我在 javascript 代码中使用此 id 来检索表单对象。

我使用以下代码来更新提交时的摘要错误列表

$(function () {
    var formValidator,
        $form = $("#formA");

    // add handler to the forms submit action
    $form.submit(function () {
        if (!formValidator) {
            formValidator = $form.validate({}); // Get existing jquery validate object
        }

        var errorList = [];

        // get existing summary errors from jQuery validate
        $.each(formValidator.errorList, function (index, errorListItem) {
            errorList.push(errorListItem.message);
        });

        // add our own errors
        if (testForErrorCondidtionA()) {
            errorList.push("Please fix error condition A!");
        }

        if (testForErrorCondidtionB()) {
            errorList.push("Please fix error condition B!");
        }

        // No errors, do nothing
        if (0 === errorList.length) {
            return true; // allow submit
        }

        // find summary div
        var $summary = $form.find("[data-valmsg-summary=true]");

        // find the unordered list
        var $ul = $summary.find("ul");

        // Clear existing errors from DOM by removing all element from the list
        $ul.empty();

        // Add all errors to the list
        $.each(errorList, function (index, message) {
            $("<li />").html(message).appendTo($ul);
        });

        // Add the appropriate class to the summary div
        $summary.removeClass("validation-summary-valid")
            .addClass("validation-summary-errors");

        return false; // Block the submit
    });
});

此提交处理程序始终在不显眼的处理程序之后调用，这意味着我们从 jQuery validate 检索的摘要错误列表将始终是最新的。

希望这个答案有所帮助，因为一旦您偏离标准案例，不引人注目的验证就会变得很棘手。