Jquery 验证 - 在急切验证期间显示验证摘要？

是否可以使用 jquery 验证来显示验证摘要？

我正在使用 MVC 3（如果重要的话），并且当每个元素失去焦点时我的表单会进行验证：

$('#myform').validate({ onfocusout: function(element) { $(element).valid(); } };

这显示了每个字段上的单独错误，但是我还想在验证摘要块中显示这些错误。但是，该验证摘要仅在提交表单时显示，而不是在失去焦点时显示。

我尝试挂钩 showErrors，但是这只给我当前的字段错误，而不是当前的错误列表。

为了完整起见，这里是表单代码：

@using (Ajax.BeginForm(...))
{

  <div class="field-panel">
    @Html.EditorFor(m => m.PatientID)
    ...

  </div>
  <input type="submit" class="carecon-button-next" value="Next" />
  @Html.ValidationSummary(null, new { @class = "validation-summary" })
}

好吧，我想我已经明白了。

该问题实际上是由于使用 MVC 3 的不显眼验证造成的，因为它为您进行了 jQuery 验证初始化。因此配置验证的唯一方法是使用form.data("validator").settings。然而，试图设置errorLabelContainer通过这种方法，即：

$("#form").data("validator").settings.errorLabelContainer = "#messageBox";

...不起作用，因为 jQuery 的验证仅在其 init() 函数内部使用此值，以配置一堆其他设置，如Containers等。我尝试模拟它的作用，甚至调用$("#form").data("validator").init()设置后再次errorLabelContainer，但这样做会导致奇怪的行为并影响许多其他设置。

所以我采取了不同的方法。首先，我为 MVC 提供了一个位置来放置各个错误字符串，使用@Html.ValidationMessageFor()，并添加display:none使其隐藏：

@using (Ajax.BeginForm(...))
{

  <div class="field-panel">
    @Html.EditorFor(m => m.PatientID)
    @Html.ValidationMessageFor(m => m.PatientID, null, new { style = "display:none"})
    ...

  </div>
  <input type="submit" class="carecon-button-next" value="Next" />
  <ul id="error-summary">
  </ul>
}

然后，在showErrors回调，我将这些字符串复制到验证摘要中after呼叫defaultShowErrors():

    $("#form").data("validator").settings.onfocusout = function (element) { $(element).valid(); };
    $("#form").data("validator").settings.showErrors = function (errorMap, errorList) {
        this.defaultShowErrors();
        $("#error-summary").empty();
        $(".field-validation-error span", $("#form"))
            .clone()
            .appendTo("#error-summary")
            .wrap("<li>");

    };

这给了我想要的行为，当用户填写表单上的字段时，在摘要中显示/隐藏验证错误作为列表。