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

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

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

{
     "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检索的摘要错误列表将始终是最新的。

希望这个答案有所帮助，因为一旦你转离标准案例，不显眼的验证会变得毛茸茸。

Answer 2

对于我的工作，我添加了这样的错误

var Frm =  "#SomeFrm"
, $validator = $(Frm).validate();


if (SomeNeedValid())
{
    $validator.errorList.push({"message":"fix error"});
    $(Frm).trigger('invalid-form.validate', validator);
}

Answer 3

我遇到了同样的问题，无法找到更清洁的方法。这就是我在想的事情

代替这个

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

把它，

        var error = {}, keyLess = 0;

        for (var j = 0; j < response.errors.length; j++) {
            var key = response.errors[j].key;
            error[key || keyLess++] = response.errors[j].message;
        }

        $form.validate().showErrors(error);

        var container = $form.find("[data-valmsg-summary=true]"), 
            list = container.find("ul");

        if (list && list.length) {
            list.empty();
            container
              .addClass("validation-summary-errors")
              .removeClass("validation-summary-valid");

            $.each(error, function(k,m) {
                $("<li />").html(m).appendTo(list);
            });
        }

这基本上就是jQuery.validate.unobtrusive所做的

您怎么看？

Answer 4

    if (!formValidator) {
        formValidator = $form.validate({}); // Get existing jquery validate object
    }

    // 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!");
    }

    //unobtrusiveValidation should do the ul/summary dirty work.
    $form.trigger('invalid-form.validate', formValidator);

Answer 5

MVC 5错误清除方法（与上述略有不同）：

function resetValidation() {
    var form = $('#formName');
    var summary = form.find('[data-valmsg-summary=true]');
    var ul = summary.find('ul');
    ul.empty();
    summary.removeClass('validation-summary-errors').addClass('validation-summary-valid');
}

享受！

在没有密钥的情况下为JQuery Unobtrusive验证摘要添加错误

5 个答案: